@extends("layouts.home")
@section("title")
   الرئيسية | مركز د.حيدر عبد الشافي
@endsection

<style>
    .stats-grid {
        display: flex;
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;
        padding: 40px;
        background: #f8f9fa;
    }

    .modern-card {
        position: relative;
        background: #ffffff;
        width: 260px;
        padding: 30px;
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(0,0,0,0.03);
        box-shadow: 0 10px 20px rgba(0,0,0,0.02);
        overflow: hidden;
    }

    .modern-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }

    /* نمط الأيقونات */
    .icon-wrapper {
        width: 70px;
        height: 70px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }

    .modern-card:hover .icon-wrapper {
        transform: scale(1.1) rotate(5deg);
    }

    /* ألوان مخصصة لكل نوع */
    .relief { background: #fff5f5; color: #ff4d4d; }
    .training { background: #f0f7ff; color: #007bff; }
    .aid { background: #f0fff4; color: #28a745; }

    .stat-info h2 {
        font-size: 36px;
        margin: 0;
        color: #2d3436;
        font-family: 'Poppins', sans-serif;
    }

    .stat-info p {
        color: #636e72;
        font-weight: 500;
        margin-top: 5px;
        font-size: 15px;
    }

    /* خط تقدم جمالي أسفل الكارد */
    .card-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background: linear-gradient(90deg, #ff0015, rgba(255, 0, 0, 0.66));
        transition: width 1.5s ease-out;
    }

    .modern-card:hover .card-progress {
        width: 100%;
    }


    #videoOverlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 99999;
    }

    .video-wrapper {
        position: relative;
        width: 90%;
        max-width: 900px;
        aspect-ratio: 16 / 9;
        background: #000;
    }

    .video-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .close-video {
        position: absolute;
        top: -40px;
        right: 0;
        background: transparent;
        border: none;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
    }

    .modal-backdrop {
        display: none !important;
    }

    /* في حال كنت تريد إلغاءها لهذا الـ Modal فقط دون التأثير على الموقع بالكامل */
    #activityVideo ~ .modal-backdrop {
        opacity: 0 !important;
    }
</style>

@section("page-content")
    <main>
    <section class="hero-slider">
        <div id="heroCarousel"
             class="carousel slide carousel-fade"
             data-bs-ride="carousel"
             data-bs-interval="6000">

            <div class="carousel-inner">
                @foreach($sliders as $index => $slider)
                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                        <div class="hero-slide">

                            <img class="hero-bg"
                                 src="{{ url('uploads'.'/'.$slider->main_image_ar) }}"
                                 alt="{{ $slider->title_ar }}">

                            <div class="hero-overlay"></div>

                            <div class="container hero-content hero-center">
                                <div class="hero-box">
                                    <div class="hero-text-center">

                                        <h1 class="hero-headline">
                                            {!! $slider->title_ar !!}
                                        </h1>

                                        <p class="hero-description">
                                            {!! $slider->details_ar !!}
                                        </p>

                                        <a href="#details" class="hero-readmore">
                                            عرض المزيد
                                        </a>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach

            </div>

            <div class="hero-controls">
                <button class="hero-control hero-prev"
                        type="button"
                        data-bs-target="#heroCarousel"
                        data-bs-slide="prev">
                    <span class="arrow-icon"></span>
                </button>

                <button class="hero-control hero-next"
                        type="button"
                        data-bs-target="#heroCarousel"
                        data-bs-slide="next">
                    <span class="arrow-icon"></span>
                </button>
            </div>

        </div>
    </section>


    <section class="section about95">
        <div class="about95__container">
            <div class="about95__grid">
                <!-- RIGHT: content -->
                <div class="about95__right">
                    <div class="about95__head">
                        <h2 class="about95__title">من نحن</h2>
                        <span class="about95__titleBar" aria-hidden="true"></span>
                    </div>

                    <p class="about95__text mb-2">
                        مركز الدكتور حيدر عبد الشافي للثقافة والتنمية (HCCD) هو مؤسسة فلسطينية أهلية مستقلة وغير ربحية، تأسست عام 2014 على يد نخبة من النشطاء والمثقفين والقيادات المجتمعية في غزة. يستلهم المركز رؤيته من سيرة ومسيرة الدكتور حيدر عبد الشافي – القامة الوطنية، والطبيب، والمناضل من أجل العدالة – ويعمل على مواصلة إرثه في دعم حقوق الإنسان، وتعزيز المسؤولية المجتمعية، وترسيخ مبادئ المشاركة الديمقراطية.
                    </p>

                    <p class="about95__text mb-2">
                        مركز الدكتور حيدر عبد الشافي للثقافة والتنمية (HCCD) هو مؤسسة فلسطينية أهلية مستقلة وغير ربحية، تأسست عام 2014 على يد نخبة من النشطاء والمثقفين والقيادات المجتمعية في غزة. يستلهم المركز رؤيته من سيرة ومسيرة الدكتور حيدر عبد الشافي – القامة الوطنية، والطبيب، والمناضل من أجل العدالة – ويعمل على مواصلة إرثه في دعم حقوق الإنسان، وتعزيز المسؤولية المجتمعية، وترسيخ مبادئ المشاركة الديمقراطية.
                    </p>

                    <div class="about95__stats mt-5" id="about95-stats" style=" position: relative; ">


                    </div>

                    <div class="about95__cta">
                        <a class="about95__btn" href="#about.html">
                            <span>عرض المزيد</span>
                            <i class="bi bi-arrow-left"></i>
                            <!-- <i aria-hidden="true">←</i> -->
                        </a>
                    </div>
                </div>
                <!-- LEFT: collage -->
                <div class="about95__left">

                    <div class="about95__ribbon">
                        <span>مركز الدكتور حيدر عبد الشافي</span>
                    </div>

                    <div class="about95__dots" aria-hidden="true"></div>

                    <div class="about95__collage">

                        <!-- Top mini logo card -->
                        <div class="about95__logoCard">
                            <div class="about95__logoIcon">
                                <img class="hero-bg" src="assets/img/logo-2.png" alt="Slide 2">
                            </div>

                        </div>

                        <!-- Main image -->
                        <figure class="about95__main">
                            <img
                                src="assets/img/ddd.jpg"
                                alt="main"
                            />
                            <!-- auto=format&fit=crop -->
                            <button class="about95__play"
                                    type="button"
                                    aria-label="تشغيل الفيديو"
                                    data-bs-toggle="modal"
                                    data-bs-target="#activityVideo">
                                <i class="fas fa-play"></i> </button>

                            <div class="modal fade" id="activityVideo" tabindex="-1" aria-labelledby="activityVideoLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                    <div class="modal-content" style="background: transparent; border: none; overflow: visible;">

                                        <div class="modal-body p-0" style="position: relative;">
                                            <button type="button"
                                                    class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal"
                                                    aria-label="Close"
                                                    style="position: absolute; right: 0; top: -40px; z-index: 1060; opacity: 1;">
                                            </button>

                                            <div class="ratio ratio-16x9" style="border-radius: 15px; overflow: hidden; box-shadow: 0 10px 50px rgba(0,0,0,0.5);">
                                                <iframe src="https://www.youtube.com/embed/ikjd3AbU7rQ?enablejsapi=1"
                                                        id="videoIframe"
                                                        title="YouTube video player"
                                                        frameborder="0"
                                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                        allowfullscreen>
                                                </iframe>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>


                        </figure>

                        <!-- Small image -->
{{--                        <figure class="about95__small">--}}
{{--                            <img--}}
{{--                                src="assets/img/HE.jpg"--}}
{{--                                alt="small"--}}
{{--                            />--}}
{{--                        </figure>--}}

                        <!-- Red outline behind (like screenshot) -->
                        <span class="about95__outline" aria-hidden="true"></span>
                    </div>
                </div>



            </div>
        </div>
    </section>



        <div class="stats-grid">
            <div class="modern-card">
                <div class="icon-wrapper relief">
                    <i class="fas fa-hand-holding-heart"></i>
                </div>
                <div class="stat-info">
                    <h2 class="counter" data-target="8500">152</h2>
                    <p>عمل إغاثي</p>
                </div>
                <div class="card-progress"></div>
            </div>

            <div class="modern-card">
                <div class="icon-wrapper training">
                    <i class="fas fa-chalkboard-teacher"></i>
                </div>
                <div class="stat-info">
                    <h2 class="counter" data-target="120">0</h2>
                    <p>مشاريع تدريب</p>
                </div>
                <div class="card-progress"></div>
            </div>

            <div class="modern-card">
                <div class="icon-wrapper aid">
                    <i class="fas fa-box-open"></i>
                </div>
                <div class="stat-info">
                    <h2 class="counter" data-target="15000">0</h2>
                    <p>مساعدات إنسانية</p>
                </div>
                <div class="card-progress"></div>
            </div>
        </div>


{{--        <section class="stats-section">--}}
{{--            <div class="stats-container">--}}
{{--                <div class="stat-card">--}}
{{--                    <div class="stat-icon"><i style="color: #e11d2e" class="fas fa-hand-holding-heart"></i></i></div>--}}
{{--                    <h2 class="stat-number" data-target="150">0</h2>--}}
{{--                    <p class="stat-title">أعمال إغاثية</p>--}}
{{--                </div>--}}
{{--                <div class="stat-card">--}}
{{--                    <div class="stat-icon"><i style="color: #e11d2e" class="fas fa-chalkboard-teacher"></i></div>--}}
{{--                    <h2 class="stat-number" data-target="85">0</h2>--}}
{{--                    <p class="stat-title"> مشاريع تدريب</p>--}}
{{--                </div>--}}
{{--                <div class="stat-card">--}}
{{--                    <div class="stat-icon"><i style="color: #e11d2e" class="fas fa-box-open"></i></div>--}}
{{--                    <h2 class="stat-number" data-target="1200">0</h2>--}}
{{--                    <p class="stat-title">مساعدات وطرود</p>--}}
{{--                </div>--}}
{{--                <div class="stat-card">--}}
{{--                    <div class="stat-icon"><i style="color: #e11d2e" class="fas fa-award"></i></div>--}}
{{--                    <h2 class="stat-number" data-target="15">0</h2>--}}
{{--                    <p class="stat-title">جوائز وأوسمة</p>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </section>--}}



    <section class="section u-bg-soft" id="reports">
        <div class="container">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                <h2 class="section-title mb-0">تقارير</h2>
                <div class="d-flex gap-2">
                    <button class="slider__btn" type="button" data-slider="prev" aria-label="السابق">
                        <i class="bi bi-arrow-right"></i>
                    </button>
                    <button class="slider__btn" type="button" data-slider="next" aria-label="التالي">
                        <i class="bi bi-arrow-left"></i>
                    </button>
                </div>
            </div>

            <div class="slider" data-reveal>
                <div class="slider__track" aria-label="سلايدر التقارير">
                    @foreach($reports as $report)
                        <article class="cardx">
                            <picture>
                                <div class="cardx__media">
                                    <img class="cardx__img"
                                         src="{{url('uploads/'.$report->main_image)}}"
                                         alt="{{ $report->title }}"
                                         loading="lazy"
                                         decoding="async">
                                </div>
                            </picture>

                            <div class="p-3 p-lg-4">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge-new">جديد</span>
                                    {{-- <span class="u-text-muted fw-bold">
                                        {{ $report->created_at->format('Y/m/d') }}
                                    </span> --}}
                                </div>

                                <h6 class="h6 fw-black mb-2" style="font-weight: 900;">
                                    {{ $report->title }}
                                </h6>

                                <p class="u-text-muted mb-3" style="line-height:1.9;">
                                    {!!  \Illuminate\Support\Str::limit($report->details, 140) !!}
                                </p>

                                <a href="#"
                                   class="btn btn-primary-hccd d-inline-flex align-items-center gap-2">
                                    <span>عرض المزيد</span>
                                </a>
                            </div>
                        </article>
                    @endforeach

                </div>
            </div>

        </div>
    </section>


    <section class="section " id="articles">
        <div class="container" >
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h2 class="section-title mb-0">مقالات</h2>

                <div class="d-flex gap-2">
                    <button class="slider__btn" type="button" data-slider="prev" aria-label="السابق">
                        <i class="bi bi-arrow-right"></i>
                    </button>
                    <button class="slider__btn" type="button" data-slider="next" aria-label="التالي">
                        <i class="bi bi-arrow-left"></i>
                    </button>
                </div>

            </div>

            <div class="mt-4" data-reveal>
                <div class="row g-3">
                    <div class="mt-4 articles-slider" data-reveal>
                        <div class="articles-track" aria-label="سلايدر المقالات">
{{--                            <a href="article_page.html" class="article-link">--}}
{{--                                <article class="overlay-card article-item is-lg">--}}
{{--                                    <div class="overlay-card__bg" style="background-image:url('assets/img/article_trucks.webp');"></div>--}}
{{--                                    <div class="overlay-card__overlay"></div>--}}
{{--                                    <div class="overlay-card__body">--}}
{{--                                        <h3 class="overlay-card__title">اسم المقال</h3>--}}
{{--                                        <p class="overlay-card__text">--}}
{{--                                            هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربي.--}}
{{--                                        </p>--}}
{{--                                    </div>--}}
{{--                                </article>--}}
{{--                            </a>--}}

                            @foreach($articles as $index=>$article)

                            <a href="article_page.html" class="article-link">
                                <article class="overlay-card article-item {{ $index == 0 ? 'is-lg' : 'is-sm' }}">
                                    <div class="overlay-card__bg" style="background-image:url({{url('uploads').'/'.$article->main_image}});"></div>
                                    <div class="overlay-card__overlay"></div>
                                    <div class="overlay-card__body">
                                        <h3 class="overlay-card__title">{{$article->title}}</h3>
                                        <p class="overlay-card__text">
                                            {!! \Illuminate\Support\Str::limit($article->details) !!}
                                        </p>
                                    </div>
                                </article>
                            </a>
                            @endforeach


                        </div>

                        <div class="mt-4 d-flex align-items-center gap-3">
                            <div class="flex-grow-1 articles-progress">
                                <div data-articles-progress class="articles-progress__bar"></div>
                            </div>

                            <div class="articles-count">
                                <span class="total" data-articles-total>{{$articles->count()}}</span>
                                <span class="sep">/</span>
                                <span class="current" data-articles-current>01</span>
                            </div>
                        </div>
                    </div>




                </div>


            </div>
        </div>
    </section>


    <section class="donate-cta">
        <div class="donate-cta__box" style='
      background-image:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.60)),
    url("assets/img/reports_banner.jpg");
    '>
            <div class="container">

{{--                <!-- Floating icons -->--}}
{{--                <div class="donate-cta__icon donate-cta__icon--tl">--}}
{{--                  <img src="assets/img/icon-money.png" alt="تبرع">--}}
{{--                </div>--}}

{{--                <div class="donate-cta__icon donate-cta__icon--br">--}}
{{--                  <img src="assets/img/icon-people.png" alt="مبادرات">--}}
{{--                </div> --}}

                <div class="donate-cta__icon donate-cta__icon--tl">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                </div>

                <div class="donate-cta__icon donate-cta__icon--br">
                    <i class="fa-solid fa-users"></i>
                </div>

                <!-- Content -->
                <div class="donate-cta__content">

                    <h2 class="donate-cta__title">
                        تبرعك اليوم هو خطوة حقيقية نحو إنقاذ حياة وبناء<br>
                        مستقبل أفضل لمن هم بأمس الحاجة.
                    </h2>
                    <a href="donate.html" class="donate-cta__btn">
                        تبرع الآن
                        <span class="donate-cta__btn-ico">♡</span>
                    </a>
                </div>

            </div>
        </div>
    </section>

    <section class="section activities" id="activities">
        <div class="container">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h2 class="section-title mb-0">أنشطة المركز</h2>
                <a href="{{ url('activities') }}"
                   class="btn btn-primary-hccd d-inline-flex align-items-center gap-2">
                    <span>عرض المزيد</span>
                    <i class="bi bi-arrow-left"></i>
                </a>
            </div>

        @php
            $activities = $activities->take(4)->values();
        @endphp

        <!-- ROW 1 -->
            <div class="mt-4 row g-4 align-items-stretch justify-content-center">

                <!-- BIG (index 0) -->
                @if(isset($activities[0]))
                    <div class="col-lg-7">
                        <a href="{{ url('activity/'.$activities[0]->id) }}"
                           class="act-card act-card--big">
                            <img class="act-card__img"
                                 src="{{ url('uploads/'.$activities[0]->main_image) }}"
                                 alt="{{ $activities[0]->title }}">
                            <div class="act-card__shade"></div>
                            <div class="act-card__cap">
                                {{ $activities[0]->title }}
                            </div>
                        </a>
                    </div>
                @endif

            <!-- SMALL (index 1) -->
                @if(isset($activities[1]))
                    <div class="col-lg-5">
                        <a href="{{ url('activity/'.$activities[1]->id) }}"
                           class="act-card act-card--sm">
                            <img class="act-card__img"
                                 src="{{ url('uploads/'.$activities[1]->main_image) }}"
                                 alt="{{ $activities[1]->title }}">
                            <div class="act-card__shade"></div>
                            <div class="act-card__cap">
                                {{ $activities[1]->title }}
                            </div>
                        </a>
                    </div>
                @endif

            </div>

            <!-- ROW 2 -->
            <div class="row g-4 align-items-stretch mt-1 justify-content-center">

                <!-- SMALL (index 2) -->
                @if(isset($activities[2]))
                    <div class="col-lg-5">
                        <a href="{{ url('activity/'.$activities[2]->id) }}"
                           class="act-card act-card--sm">
                            <img class="act-card__img"
                                 src="{{ url('uploads/'.$activities[2]->main_image) }}"
                                 alt="{{ $activities[2]->title }}">
                            <div class="act-card__shade"></div>
                            <div class="act-card__cap">
                                {{ $activities[2]->title }}
                            </div>
                        </a>
                    </div>
                @endif

            <!-- BIG (index 3) -->
                @if(isset($activities[3]))
                    <div class="col-lg-7">
                        <a href="{{ url('activity/'.$activities[3]->id) }}"
                           class="act-card act-card--big">
                            <img class="act-card__img"
                                 src="{{ url('uploads/'.$activities[3]->main_image) }}"
                                 alt="{{ $activities[3]->title }}">
                            <div class="act-card__shade"></div>
                            <div class="act-card__cap">
                                {{ $activities[3]->title }}
                            </div>
                        </a>
                    </div>
                @endif

            </div>

        </div>
    </section>

    <div class="modal fade" id="activityVideo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content video-modal">
                <button type="button" class="btn-close ms-auto me-2 mt-2"
                        data-bs-dismiss="modal"></button>

                <div class="ratio ratio-16x9">
                    <iframe
                        src="https://www.youtube.com/embed/VIDEO_ID"
                        title="فيديو النشاط"
                        allow="autoplay; encrypted-media"
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const counters = document.querySelectorAll('.counter');

        // خيارات المراقب: يبدأ التفاعل عندما تظهر 20% من الكارد
        const options = {
            threshold: 0.2
        };

        const startCounting = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    const target = +counter.getAttribute('data-target');
                    const duration = 2000; // مدة الأنميشن بالميلي ثانية (ثانيتين)
                    const increment = target / (duration / 16); // 16ms هي تقريباً مدة الفريم الواحد

                    const updateCount = () => {
                        const count = +counter.innerText;
                        if (count < target) {
                            counter.innerText = Math.ceil(count + increment);
                            setTimeout(updateCount, 16);
                        } else {
                            counter.innerText = target.toLocaleString(); // إضافة فواصل الأرقام الكبيرة
                        }
                    };

                    updateCount();
                    observer.unobserve(counter); // التوقف عن المراقبة بعد انتهاء العد لمرة واحدة
                }
            });
        };

        const observer = new IntersectionObserver(startCounting, options);

        counters.forEach(counter => {
            observer.observe(counter);
        });
    });
</script>

<script>
    const videoModal = document.getElementById('activityVideo');
    const videoIframe = document.getElementById('videoIframe');
    const originalSrc = videoIframe.src;

    // عند إغلاق النافذة، نقوم بتفريغ الرابط لإيقاف الفيديو
    videoModal.addEventListener('hidden.bs.modal', function () {
        videoIframe.src = "";
    });

    // عند فتح النافذة، نعيد الرابط ليعمل الفيديو من جديد
    videoModal.addEventListener('show.bs.modal', function () {
        videoIframe.src = originalSrc;
    });
</script>