{% extends "base.html" %}
{% block content %}

<!-- هدر مدرن با گرادیان و افکت شیشه‌ای (هماهنگ با base جدید) -->
<section class="hero-section-modern position-relative text-white py-5 mb-5 overflow-hidden"
    style="background: linear-gradient(135deg, #0f2b5e 10%, #067b80 40%, #67a1ec 100%); border-radius: 0 0 60px 60px; box-shadow: 0 20px 60px rgba(15,43,94,0.25);">

    <!-- المان تزیینی پس‌زمینه -->
    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10"
        style="background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 50%, transparent 50%);"></div>
    <div class="position-absolute bottom-0 end-0 opacity-50 d-none d-lg-block"
        style="font-size: 15rem; transform: translateX(40%);">
    </div>

    <div class="container position-relative" style="z-index: 2;">
        <div class="row align-items-center">
            <div class="col-lg-8" data-aos="fade-up">
                
                <h1 class="display-3 fw-bold mb-3" style="text-shadow: 0 4px 20px rgba(0,0,0,0.15);">
                    <i></i>به سامانه نیوگاه خوش آمدید
                </h1>
                    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Hero" class="img-fluid" style="max-height: 80px;">
                    مدیریت هوشمند پروژه‌های عمرانی، کنترل حضور مبتنی بر GPS، دریافت و پرداخت قراردادها از صندوق امانی 
                </p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ url_for('public.index') }}" class="btn btn-light btn-lg px-5 py-3 rounded-pill shadow-lg"
                        style="color: #0f2b5e; font-weight: 700; transition: all 0.3s;">
                        <i class="fas fa-chart-line me-2"></i>مشاهده داشبورد
                    </a>
                    <a href="{{ url_for('public.advertisement_request') }}" class="btn btn-outline-light btn-lg px-5 py-3 rounded-pill shadow-lg"
                        style="font-weight: 700; transition: all 0.3s; border-width: 2px;">
                        <i class="fas fa-plus me-2"></i>درخواست تبلیغ
                    </a>
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-block text-center" data-aos="fade-left">
                <div class="bg-white bg-opacity-10 rounded-4 p-4 backdrop-blur-sm"
                    style="backdrop-filter: blur(12px); border: 1px solid rgba(245, 243, 243, 0.15);">
                    <!-- تصویر لوگو به جای آیکون -->
                    <img src="{{ url_for('static', filename='images/hero.png') }}">
                    <div class="mt-3">
                        <span class="d-block text-white-50 small">مدیریت </span>
                        <span class="display-5 fw-bold text-white">حقوق و دستمزد </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- بخش آگهی‌های تایید شده -->
<div class="container">
    <!-- هدر بخش با طراحی مدرن -->
    <div class="d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom position-relative"
        style="border-color: rgba(15,43,94,0.08) !important;">
        <div class="d-flex align-items-center gap-3">
            <div class="bg-primary bg-opacity-10 p-3 rounded-4" style="color: #0f2b5e;">
                <i class="fas fa-bullhorn fa-2x"></i>
            </div>
            <div>
                <h3 class="fw-bold mb-0" style="color: #0f2b5e;">آگهی‌های تایید شده</h3>
                <span class="text-muted small">آخرین فرصت‌های همکاری</span>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url_for('public.advertisements_list') }}" class="btn btn-outline-primary rounded-pill px-4 py-2">
                مشاهده همه <i class="fas fa-arrow-left me-1"></i>
            </a>
            <a href="{{ url_for('public.advertisement_request') }}" class="btn btn-primary rounded-pill px-4 py-2">
                <i class="fas fa-plus me-1"></i> درخواست تبلیغ
            </a>
        </div>
    </div>

    <!-- نمایش آگهی‌ها به صورت کارت‌های مدرن -->
    <div class="row g-4">
        {% set ads_list = active_ads if active_ads is defined and active_ads|length > 0 else advertisements if advertisements is defined and advertisements|length > 0 else [] %}
        
        {% for ad in ads_list %}
        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
            <div class="card h-100 border-0 shadow-sm hover-card"
                style="border-radius: 20px; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: #ffffff;">

                <!-- بخش تصویر با افکت زوم -->
                <div class="position-relative overflow-hidden" style="height: 220px;">
                    {% if ad.image_path %}
                    <img src="{{ url_for('static', filename='uploads_ads/' + ad.image_path.split('/')[-1]) }}"
                        class="card-img-top w-100 h-100" alt="{{ ad.title }}"
                        style="object-fit: cover; transition: transform 0.6s ease;">
                    {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-light"
                        style="background: linear-gradient(135deg, #f0f4f9 0%, #e8edf4 100%);">
                        <i class="fas fa-ad fa-4x text-muted opacity-25"></i>
                    </div>
                    {% endif %}

                    <!-- برچسب تاریخ (آیکون تقویم) -->
                    <div class="position-absolute top-0 end-0 m-3">
                        <span class="badge bg-white bg-opacity-90 text-dark px-3 py-2 rounded-pill shadow-sm">
                            <i class="far fa-calendar-alt me-1"></i> تا {{ ad.end_date.strftime('%Y/%m/%d') if ad.end_date else 'نامحدود' }}
                        </span>
                    </div>

                    <!-- برچسب دسته‌بندی -->
                    <div class="position-absolute bottom-0 start-0 m-3">
                        <span class="badge bg-primary bg-opacity-90 px-3 py-2 rounded-pill">
                            <i class="fas fa-tag me-1"></i> {{ ad.category or 'پروژه عمرانی' }}
                        </span>
                    </div>
                </div>

                <!-- محتوای کارت -->
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-2" style="color: #0a1e3d; font-size: 1.1rem;">
                        {{ ad.title }}
                    </h5>
                    <p class="card-text text-muted small mb-3" style="line-height: 1.8;">
                        {{ ad.description[:120] }}{% if ad.description|length > 120 %}...{% endif %}
                    </p>

                    <!-- اطلاعات تکمیلی و دکمه اقدام -->
                    <div class="d-flex align-items-center justify-content-between mt-3 pt-3 border-top"
                        style="border-color: rgba(0,0,0,0.05) !important;">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-light text-dark px-3 py-2 rounded-pill">
                                <i class="fas fa-eye me-1"></i> {{ ad.view_count or 0 }}
                            </span>
                            <span class="badge bg-light text-dark px-3 py-2 rounded-pill">
                                <i class="fas fa-mouse-pointer me-1"></i> {{ ad.click_count or 0 }}
                            </span>
                        </div>
                        {% if ad.target_url %}
                        <a href="{{ url_for('public.advertisement_click', ad_id=ad.id) }}" class="btn btn-primary btn-sm rounded-pill px-4 py-2" style="font-weight: 600;" target="_blank">
                            مشاهده <i class="fas fa-chevron-left me-1"></i>
                        </a>
                        {% else %}
                        <a href="#" class="btn btn-primary btn-sm rounded-pill px-4 py-2" style="font-weight: 600;">
                            مشاهده <i class="fas fa-chevron-left me-1"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <!-- پیام خالی بودن آگهی‌ها -->
        <div class="col-12">
            <div class="text-center py-5" data-aos="fade-up">
                <div class="bg-light rounded-4 p-5" style="border: 2px dashed rgba(15,43,94,0.1);">
                    <i class="fas fa-inbox fa-4x text-muted opacity-25 mb-3"></i>
                    <h5 class="text-muted">هیچ آگهی تایید شده‌ای موجود نیست</h5>
                    <p class="text-muted small">برای ثبت آگهی جدید، روی دکمه "درخواست تبلیغ" کلیک کنید</p>
                    <a href="{{ url_for('public.advertisement_request') }}" class="btn btn-primary rounded-pill px-4 py-2 mt-2">
                        <i class="fas fa-plus me-1"></i> درخواست تبلیغ
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- دکمه بارگذاری بیشتر (نمایشی) -->
    {% if ads_list|length > 0 %}
    <div class="text-center mt-5" data-aos="fade-up">
        <a href="{{ url_for('public.advertisements_list') }}" class="btn btn-outline-primary rounded-pill px-5 py-3" style="font-weight: 600;">
            <i class="fas fa-list me-2"></i>مشاهده همه آگهی‌ها
        </a>
    </div>
    {% endif %}
</div>

<!-- بخش درخواست‌های در انتظار تایید (فقط ادمین) -->
{% if current_user.is_authenticated and current_user.is_admin %}
<div class="container mt-5">
    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        <div class="card-header bg-warning bg-opacity-10 border-0 py-3" style="border-radius: 20px 20px 0 0;">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-warning bg-opacity-20 p-2 rounded-3" style="color: #856404;">
                    <i class="fas fa-clock fa-2x"></i>
                </div>
                <div>
                    <h5 class="fw-bold mb-0" style="color: #856404;">درخواست‌های در انتظار تایید</h5>
                    <span class="text-muted small">مدیریت درخواست‌های تبلیغات</span>
                </div>
            </div>
        </div>
        <div class="card-body p-4">
            {% if pending_ads %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>عنوان</th>
                            <th>تبلیغ‌دهنده</th>
                            <th>تاریخ درخواست</th>
                            <th>عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ad in pending_ads %}
                        <tr>
                            <td class="fw-bold">{{ ad.title }}</td>
                            <td>{{ ad.advertiser_name or 'نامشخص' }}</td>
                            <td>{{ ad.created_at.strftime('%Y/%m/%d') if ad.created_at else '' }}</td>
                            <td>
                                <a href="{{ url_for('admin.advertisement_requests') }}" class="btn btn-sm btn-primary rounded-pill px-3">
                                    <i class="fas fa-cog me-1"></i> مدیریت
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-3">
                <i class="fas fa-check-circle text-success fa-2x mb-2"></i>
                <p class="text-muted mb-0">هیچ درخواست در انتظار تاییدی وجود ندارد</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

<!-- استایل‌های سفارشی برای این صفحه -->
<style>
    /* افکت هاور پیشرفته برای کارت‌ها */
    .hover-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .hover-card:hover {
        transform: translateY(-12px) scale(1.01);
        box-shadow: 0 24px 48px rgba(15, 43, 94, 0.15) !important;
    }

    .hover-card:hover .card-img-top {
        transform: scale(1.05);
    }

    /* افکت شیشه‌ای برای هدر */
    .backdrop-blur-sm {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* انیمیشن ورود برای بخش‌ها */
    [data-aos] {
        opacity: 0;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    [data-aos].aos-animate {
        opacity: 1;
    }

    /* ریسپانسیو برای موبایل */
    @media (max-width: 768px) {
        .hero-section-modern {
            border-radius: 0 0 30px 30px;
            padding: 2rem 0 !important;
        }

        .hero-section-modern .display-3 {
            font-size: 2rem;
        }

        .hero-section-modern .lead {
            font-size: 1.1rem;
        }

        .hero-section-modern .btn {
            padding: 0.6rem 1.5rem !important;
            font-size: 0.9rem;
        }
    }
</style>

{% endblock %}