@extends('layouts.site')

@section('title', 'الأبحاث | XRD LAB')

@section('content')
<main id="main">
    <section class="portfolio-coming-soon" dir="rtl">
        <div class="container" data-aos="fade-up">
            <div class="portfolio-coming-soon-card">
                <h3>صفحة المشاريع البحثية</h3>
                <p>
                    هذه الصفحة مخصصة لنشر مشاريع معمل XRD البحثية وعرض تفاصيلها بشكل منظم.
                </p>
                <p>
                    نعمل حالياً على تعبئة المحتوى، وستكون الصفحة متاحة قريباً بإذن الله.
                </p>
                <p class="mb-0">
                    للاستفسارات أو التعاون، يرجى
                    <a href="{{ route('contact.show') }}">التواصل معنا</a>.
                </p>
            </div>
        </div>
    </section>

    {{--
    <section class="portfolio-hero" dir="rtl">
        <div class="container">
            <div class="portfolio-hero-glass">
                <h2>المشاريع البحثية في معمل XRD</h2>
                <p class="mb-0">
                    استعرض المشاريع المكتملة والجارية والمستقبلية، وادخل إلى صفحة كل مشروع لمعرفة الفريق، التطورات، والجهات الراعية.
                </p>
                <div class="portfolio-hero-stats" aria-label="إحصاءات المشاريع">
                    <div class="portfolio-stat">
                        <span class="portfolio-stat-icon"><i class="bi bi-grid"></i></span>
                        <div class="portfolio-stat-value" data-target="{{ $stats['total'] ?? 0 }}">0</div>
                        <div class="portfolio-stat-label">إجمالي المشاريع</div>
                    </div>
                    <div class="portfolio-stat">
                        <span class="portfolio-stat-icon"><i class="bi bi-check2-circle"></i></span>
                        <div class="portfolio-stat-value" data-target="{{ $stats['completed'] ?? 0 }}">0</div>
                        <div class="portfolio-stat-label">المشاريع المكتملة</div>
                    </div>
                    <div class="portfolio-stat">
                        <span class="portfolio-stat-icon"><i class="bi bi-hourglass-split"></i></span>
                        <div class="portfolio-stat-value" data-target="{{ $stats['in_progress'] ?? 0 }}">0</div>
                        <div class="portfolio-stat-label">المشاريع الجارية</div>
                    </div>
                    <div class="portfolio-stat">
                        <span class="portfolio-stat-icon"><i class="bi bi-lightning-charge"></i></span>
                        <div class="portfolio-stat-value" data-target="{{ $stats['future'] ?? 0 }}">0</div>
                        <div class="portfolio-stat-label">المشاريع المستقبلية</div>
                    </div>
                </div>
                <ul id="portfolio-flters" aria-label="تصنيف المشاريع">
                    <li data-filter="*" class="filter-active">الكل</li>
                    <li data-filter=".filter-app">الابحاث المكتملة</li>
                    <li data-filter=".filter-card">الابحاث الجارية</li>
                    <li data-filter=".filter-web">الابحاث المستقبلية</li>
                </ul>
            </div>
        </div>
    </section>

    <section id="services" class="services" dir="rtl">
        <div class="container">
            @if(session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            <div class="row justify-content-center">
                @forelse($projects as $project)
                    @php
                        $statusFilterClass = match($project->status) {
                            'completed' => 'filter-app',
                            'in_progress' => 'filter-card',
                            'future' => 'filter-web',
                            default => 'filter-card',
                        };
                    @endphp

                    <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
                        <div class="icon-box {{ $statusFilterClass }}" dir="rtl">
                            <a class="project-card-overlay" href="{{ route('portfolio.show', $project) }}" aria-label="عرض تفاصيل المشروع: {{ $project->title }}"></a>
                            <div class="project-card-content">
                                <div class="icon"><i class="bx bx-file"></i></div>
                                <h4>{{ $project->title }}</h4>
                                @if($project->excerpt)
                                    <p class="project-excerpt">{{ $project->excerpt }}</p>
                                @endif
                                <p class="project-details-row"><a class="project-details-btn" href="{{ route('portfolio.show', $project) }}">عرض التفاصيل</a></p>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12" id="portfolio-empty-state">
                        <div class="alert alert-info">لا توجد مشاريع منشورة حالياً.</div>
                    </div>
                @endforelse
            </div>
            <div id="portfolio-filter-empty-state" class="alert alert-info d-none mt-3">لا توجد مشاريع ضمن هذا التصنيف حالياً.</div>
        </div>
    </section>
    --}}
</main>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var filters = document.querySelectorAll('#portfolio-flters li');
    var cards = document.querySelectorAll('#services .icon-box');

    function applyFilter(selectedFilter) {
        var selectedClass = selectedFilter === '*' ? null : selectedFilter.replace('.', '');
        var hasVisibleCards = false;

        cards.forEach(function (card) {
            var column = card.closest('.col-lg-4, .col-md-6, [class*="col-"]');
            if (!column) return;

            if (!selectedClass || card.classList.contains(selectedClass)) {
                column.classList.remove('d-none');
                hasVisibleCards = true;
            } else {
                column.classList.add('d-none');
            }
        });

        var filterEmptyState = document.getElementById('portfolio-filter-empty-state');
        var baseEmptyState = document.getElementById('portfolio-empty-state');

        if (filterEmptyState) {
            if (cards.length > 0 && !hasVisibleCards) {
                filterEmptyState.classList.remove('d-none');
            } else {
                filterEmptyState.classList.add('d-none');
            }
        }

        // Keep original empty-state only for actual no-projects dataset.
        if (baseEmptyState) {
            if (cards.length > 0) {
                baseEmptyState.classList.add('d-none');
            } else {
                baseEmptyState.classList.remove('d-none');
            }
        }
    }

    filters.forEach(function (filter) {
        filter.addEventListener('click', function (event) {
            event.preventDefault();
            var selectedFilter = this.getAttribute('data-filter');
            applyFilter(selectedFilter);

            filters.forEach(function (f) {
                f.classList.remove('filter-active');
            });
            filter.classList.add('filter-active');
        });
    });

    var activeFilter = document.querySelector('#portfolio-flters li.filter-active');
    applyFilter(activeFilter ? activeFilter.getAttribute('data-filter') : '*');

    var statNumbers = document.querySelectorAll('.portfolio-stat-value[data-target]');
    var statCards = document.querySelectorAll('.portfolio-stat');
    var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var hasAnimatedStats = false;

    function revealStats() {
        statCards.forEach(function (card, index) {
            setTimeout(function () {
                card.classList.add('is-visible');
            }, index * 120);
        });
    }

    function animateNumber(element, target, duration) {
        var startTime = null;

        function step(timestamp) {
            if (!startTime) startTime = timestamp;
            var progress = Math.min((timestamp - startTime) / duration, 1);
            element.textContent = Math.floor(progress * target).toLocaleString('ar');
            if (progress < 1) {
                window.requestAnimationFrame(step);
            } else {
                element.textContent = target.toLocaleString('ar');
            }
        }

        window.requestAnimationFrame(step);
    }

    function runStats() {
        if (hasAnimatedStats) return;
        hasAnimatedStats = true;
        revealStats();

        statNumbers.forEach(function (el, index) {
            var target = parseInt(el.getAttribute('data-target') || '0', 10);
            if (prefersReducedMotion) {
                el.textContent = target.toLocaleString('ar');
                return;
            }

            setTimeout(function () {
                animateNumber(el, target, 1000);
            }, index * 120);
        });
    }

    if (statNumbers.length) {
        if (prefersReducedMotion || !('IntersectionObserver' in window)) {
            runStats();
        } else {
            var hero = document.querySelector('.portfolio-hero-stats');
            if (!hero) return;

            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        runStats();
                        observer.disconnect();
                    }
                });
            }, { threshold: 0.35 });

            observer.observe(hero);
        }
    }
});
</script>
@endpush

@push('styles')
<style>
    .portfolio-coming-soon {
        padding: 32px 0 48px;
    }

    .portfolio-coming-soon-card {
        border: 1px solid color-mix(in oklab, rgba(255, 255, 255, 0.92) 72%, rgba(160, 174, 192, 0.42));
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
            rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
        box-shadow:
            0 12px 28px rgba(15, 23, 42, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.42);
        border-radius: 16px;
        padding: 28px 24px;
        text-align: center;
    }

    .portfolio-coming-soon-card h3 {
        margin-bottom: 10px;
        color: var(--theme-primary);
    }

    .portfolio-coming-soon-card p {
        margin-bottom: 12px;
        color: var(--theme-text-muted);
        font-size: 1rem;
        line-height: 1.8;
    }

    .portfolio-coming-soon-card p:last-child {
        margin-bottom: 0;
    }

    .portfolio-hero {
        padding: 8px 0 12px;
        --bg: rgba(255, 255, 255, 0.18);
        --glass-bg: color-mix(in oklab, var(--bg) 80%, transparent);
        --glass-border: color-mix(in oklab, var(--glass-bg) 68%, white);
    }

    .portfolio-hero-glass {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        border: 1px solid var(--glass-border);
        border-radius: 22px;
        padding: 28px 30px;
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06)),
            var(--glass-bg);
        backdrop-filter: blur(22px) saturate(155%);
        -webkit-backdrop-filter: blur(22px) saturate(155%);
        box-shadow:
            0 22px 50px rgba(17, 24, 39, 0.14),
            0 10px 28px rgba(17, 24, 39, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .portfolio-hero-glass::before {
        content: "";
        position: absolute;
        inset: -22% 50% 42% -12%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.58), transparent 72%);
        pointer-events: none;
        z-index: 0;
    }

    .portfolio-hero-glass::after {
        content: "";
        position: absolute;
        inset: auto -22% -35% 35%;
        height: 78%;
        background: radial-gradient(circle at center, color-mix(in srgb, var(--theme-primary) 20%, transparent), transparent 65%);
        pointer-events: none;
        z-index: 0;
    }

    .portfolio-hero-glass h2 {
        position: relative;
        z-index: 1;
        margin-bottom: 10px;
    }

    .portfolio-hero-glass p {
        position: relative;
        z-index: 1;
    }

    .portfolio-hero-stats {
        position: relative;
        z-index: 1;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .portfolio-stat {
        border: 1px solid color-mix(in oklab, rgba(255, 255, 255, 0.9) 75%, rgba(160, 174, 192, 0.45));
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.14);
        border-radius: 14px;
        padding: 12px 14px;
        text-align: center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .portfolio-stat.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .portfolio-stat-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-bottom: 8px;
        border: 1px solid color-mix(in srgb, var(--theme-primary) 32%, #d9dee5);
        background: #fff;
        color: var(--theme-primary);
        font-size: 1rem;
    }

    .portfolio-stat-value {
        font-size: 1.7rem;
        line-height: 1.2;
        font-weight: 700;
        color: #1f2937;
    }

    .portfolio-stat-label {
        margin-top: 4px;
        font-size: 0.9rem;
        color: var(--theme-text-muted);
    }

    #portfolio-flters {
        position: relative;
        z-index: 1;
        padding: 0;
        margin: 22px auto 0;
        list-style: none;
        text-align: center;
        background: transparent;
        border-radius: 0;
    }

    #portfolio-flters li {
        cursor: pointer;
        display: inline-block;
        padding: 8px 20px 12px 20px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        color: #444444;
        margin: 0 4px 8px 4px;
        transition: all ease-in-out 0.3s;
        border-radius: 50px;
        background: #f2f2f2;
    }

    #portfolio-flters li:hover,
    #portfolio-flters li.filter-active {
        background: #25343F;
        color: #fff;
    }

    #portfolio-flters li:last-child {
        margin-right: 0;
    }

    #services.services {
        padding-top: 4px;
    }

    #services .icon-box {
        position: relative;
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: flex;
        padding: 16px 22px 20px;
        border: 1px solid color-mix(in oklab, rgba(255, 255, 255, 0.9) 72%, rgba(160, 174, 192, 0.45));
        border-radius: 16px;
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
        box-shadow:
            0 10px 24px rgba(15, 23, 42, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.42);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    }

    #services .icon-box:hover {
        border-color: color-mix(in oklab, var(--theme-primary) 30%, white);
        box-shadow:
            0 14px 28px rgba(15, 23, 42, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.12);
        transform: translateY(-2px);
    }

    /* Keep text colors stable on hover (override global services hover styles). */
    #services .icon-box:hover h4,
    #services .icon-box:hover h4 a,
    #services .icon-box:hover p,
    #services .icon-box:hover .project-details-btn,
    #services .icon-box:hover .project-status-label {
        color: inherit !important;
    }

    /* Keep portfolio card icons unchanged on hover */
    #services .icon-box .icon,
    #services .icon-box:hover .icon {
        background: #ffffff !important;
        border: 1px solid color-mix(in srgb, var(--theme-primary) 35%, #d9dee5);
    }

    #services .icon-box .icon i,
    #services .icon-box:hover .icon i {
        color: var(--theme-primary) !important;
    }

    #services .icon-box .icon::before,
    #services .icon-box:hover .icon::before {
        background: color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
    }

    .project-card-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
    }

    .project-card-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .project-card-content h4 {
        min-height: 3.2rem;
    }

    .project-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 4.6rem;
        margin-bottom: auto;
    }

    .project-details-row {
        margin-top: 12px;
        margin-bottom: 0;
    }

    .project-status-label {
        color: inherit;
    }

    .project-details-btn {
        position: relative;
        z-index: 4;
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
    }

    @media (max-width: 991.98px) {
        .portfolio-hero-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .portfolio-hero-stats {
            grid-template-columns: 1fr;
        }

        .portfolio-stat {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            text-align: right;
            padding: 10px 12px;
        }

        .portfolio-stat-icon {
            margin-bottom: 0;
            flex: 0 0 34px;
        }

        .portfolio-stat-value {
            font-size: 1.35rem;
            line-height: 1.1;
        }

        .portfolio-stat-label {
            margin-top: 2px;
            font-size: 0.85rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .portfolio-stat {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
</style>
@endpush