@extends('layouts.appweb')

@section('content')
<div class="container-fluid bg-light">

    <!-- بانر رئيسي -->
    <section  id="hero-section" class="hero-section">
    <div class="contain text-center py-5">
        <h2 class="mb-3" style="color: whitesmoke;font-style: italic;">معاً من أجل صحة معززة و أمة معافاة</h2>
        </div>
    </section>

    <!-- الأخبار -->
    <section class="container my-5">
        <h3 class="mb-4">آخر الأخبار</h3>
        <div class="row">
            @foreach($query_NEWS as $item)
            <div class="col-md-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-body">
                   <img src="news/{{$item->post_Img}}"  style="height:200px;border-radius: 8px;width: 370px;" class="me-2">
                        <h5>{{ is_array($item) ? $item['post_Brief'] : $item->post_Brief }}</h5>
                        <p class="text-muted">{{ is_array($item) ? $item['created_at'] : $item->created_at }}</p>
                        <a href="" class="btn btn-outline-primary">المزيد</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    <!-- الإعلانات -->
    <section class="container my-5">
        <h3 class="mb-4">إعلانات هامة</h3>
        <ul class="list-group">
            @foreach($announcements as $item)
            <li class="list-group-item d-flex justify-content-between align-items-center">
                {{ is_array($item) ? $item['title'] : $item->title }}
                <span class="text-muted">{{ is_array($item) ? $item['date'] : $item->date }}</span>
            </li>
            @endforeach
        </ul>
    </section>

    <!-- الأنشطة والفعاليات -->
    <section class="container my-5">
        <h3 class="mb-4">الأنشطة والفعاليات</h3>
        <div class="row">
            @foreach($activities as $item)
            <div class="col-md-4 mb-3">
                <div class="card border-info">
                    <div class="card-body">
                        <h5>{{ is_array($item) ? $item['title'] : $item->title }}</h5>
                        <p class="text-muted">{{ is_array($item) ? $item['date'] : $item->date }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    <!-- الخدمات الإلكترونية -->
    <section class="container my-5">
        <h3 class="mb-4">الخدمات الإلكترونية</h3>
        <div class="row">
            @foreach($services as $service)
            <div class="col-md-3 mb-3">
                <div class="card p-3 text-center shadow-sm">
                    <i class="{{ is_array($service) ? $service['icon'] : $service->icon }} fa-2x mb-2"></i>
                    <h5>{{ is_array($service) ? $service['name'] : $service->name }}</h5>
                    <a href="{{ is_array($service) ? $service['link'] : $service->link }}" class="btn btn-success">الدخول للخدمة</a>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    <!-- نافذة الولايات -->
    <section class="container my-5">
        <h3 class="mb-4">نافذة الولايات</h3>
        <div class="row">
            @foreach($states as $state)
            <div class="col-md-3 mb-3">
                <div class="card p-3 border-primary text-center">
                    <h5>{{ is_array($state) ? $state['name'] : $state->name }}</h5>
                    <a href="" class="btn btn-outline-primary">عرض الخدمات</a>
                </div>
            </div>
            @endforeach
        </div>
    </section>

</div>
<script>
    // تمرير الصور من PHP إلى JavaScript
    const images = @php echo json_encode($Img); @endphp;

    let current = 0;
    const section = document.getElementById('hero-section');

    function changeBackground() {
        // إضافة كلاس لتحريك الخلفية
        section.classList.add('slide');
        setTimeout(() => {
            section.style.backgroundImage = `url(build/assets/${images[current]})`;
            current = (current + 1) % images.length;
            section.classList.remove('slide');
        }, 1000); // مدة الحركة ثانية واحدة
    }

    // أول صورة عند التحميل
    section.style.backgroundImage = `url(build/assets/${images[0]})`;

    // تغيير كل 5 ثوانٍ (غيرت من 2000 إلى 5000)
    setInterval(changeBackground, 2000);
</script>
@endsection
