{{-- <section class="wrapper bg-gray mb-0 py-0">
    <figure class="position-absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="{{ asset('/bg/3_0.png') }}" alt="SIIT Activity Transcript System" />
    </figure>
    <div class="container pt-5 pt-md-9 text-center">
        <div class="row">
            <div class="col-md-12 mx-auto text-center" data-cues="slideInDown" data-group="page-title"
                data-delay="600">
                <h1 class="display-1 fs-58 mb-7">Welcome To SIIT Activity Transcript</h1>
                <hr class="my-8" />
                <h2 class="fs-20 text-uppercase ls-xl text-dark mb-4">Annual Plan</h2>
                <hr class="my-8" />
            </div>
        </div>
    </div>
    
</section> --}}
<style>
    .swiper-container.dots-closer .swiper-pagination {
        overflow: hidden; /* ซ่อน Scrollbar */
        bottom: 200px;
    }
    .swiper-container {
        overflow: hidden; /* ซ่อน Scrollbar */
        height: 200;
    }
    .swiper-slide .swiper-slide-next{
        overflow: hidden; /* ซ่อน Scrollbar */
        height: 80%;
    }
    .swiper-slide .swiper-slide-active {
        overflow: hidden; /* ซ่อน Scrollbar */
        height: 80%;
    }
</style>

<div class="swiper-container swiper-hero dots-over" data-margin="0" data-autoplay="true" data-autoplaytime="5000"
    data-nav="true" data-dots="true" data-items="1">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide h-100 bg-overlay bg-overlay-400 bg-dark"
                style="background-image:url({{ asset('/bg/bg11.png') }});filter: brightness(1.3);">
                <div class="container m-10 h-100">
                    <div class="row h-100 align-items-center">
                        <div class="col-md-10">
                            <h2 class="display-1 fs-80 mb-4 animate__animated animate__slideInDown animate__delay-1s"
                                style="padding-left: 25px; font-family: 'Arial', sans-serif;position: relative; top: -30px; color:#243b55;">
                                SIIT <br>Activity Transcript <br> System</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="wrapper bg-gray mb-0 py-0">
    <div class="container pt-5 pt-md-9 text-center">
        <div class="row">
            <div class="col-md-12 mx-auto text-center" data-cues="slideInDown" data-group="page-title" data-delay="600">
                <h1 class="display-1 fs-58 mb-7" style="font-family: 'Arial', sans-serif;">Welcome To SIIT Activity Transcript</h1>
                <hr class="my-8" />
                <h2 class="fs-20 text-uppercase ls-xl text-dark mb-4">Announcement</h2>
                <hr class="my-8" />
                <div class="position-relative">
                    <div class="shape bg-dot primary rellax w-17 h-20" data-rellax-speed="1"
                        style="top: 0; left: -1.7rem;"></div>
                    <div class="swiper-container dots-closer blog grid-view mb-4" data-margin="0" data-dots="true"
                        data-items-xl="3" data-items-md="2" data-items-xs="1" style="height: 700px">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($announcement->sortByDesc('created_at')->take(3) as $item)
                                    <div class="swiper-slide">
                                        <div class="item-inner">
                                            <article>
                                                <div class="card">
                                                    <!-- แสดง PDF โดยใช้ embed หรือ iframe -->
                                                    @if ($item->announcement_pdf)
                                                        <figure class="card-img-top overlay overlay-1 hover-scale">
                                                            <a href="{{ asset('announcements/' . $item->announcement_pdf) }}"
                                                                target="_blank">
                                                                <embed
                                                                    src="{{ asset('announcements/' . $item->announcement_pdf) }}"
                                                                    width="100%" height="250px"
                                                                    type="application/pdf">
                                                            </a>
                                                        </figure>
                                                    @else
                                                        <figure class="card-img-top overlay overlay-1 hover-scale">
                                                            <a href="#">
                                                                <img src="./assets/img/photos/b4.jpg" alt="" />
                                                            </a>
                                                        </figure>
                                                    @endif
                                                    <div class="card-body" style="padding: 6px;">
                                                        <div class="post-header">
                                                            <h2 class="post-title h3 mt-1 mb-3" style="font-family: 'Arial', sans-serif;">
                                                                <a class="link-dark"
                                                                    href="{{ asset('announcements/' . $item->announcement_pdf) }}">{{ $item->announcement_name }}</a>
                                                            </h2>
                                                        </div>
                                                    </div>
                                                    <div class="card-footer">
                                                        <ul class="post-meta d-flex mb-0">
                                                            <li class="post-date">
                                                                <i class="uil uil-calendar-alt"></i>
                                                                <span>{{ $item->created_at }}</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </article>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <a href="{{ url('/announcementall') }}" class="btn btn-soft-sky rounded-pill" style="margin-top: -240px">See more</a>
                {{-- <div class="position-relative" style="padding-bottom: 0;">
                    <a href="{{ url('/announcementall') }}" class="btn btn-soft-sky rounded-pill">See more</a>
                </div> --}}
                <br>
            </div>
        </div>
        <br>
    </div>
</section>