@extends('layouts.master')
@section('title', 'Announcement')
<link rel="icon" href="{{ asset('/logo/siitlogo.png') }}" type="image/icon type">
@section('style')
    <style>
        .swiper-container.dots-closer .swiper-pagination {
            bottom: 50px;
        }
    </style>
@endsection

@section('script')
    <script></script>
@endsection

@section('content')
    @include('layouts.header')
    <section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="{{ asset('/bg/bgg02.png') }}"
        style="background-image: url('{{ asset('/bg/bgg02.png') }}');">
        <div class="container pt-14 pt-md-16 pb-23 pb-md-15 text-center">
            <div class="row">
                <div class="row">
                    <div class="col-lg-8 col-xxl-7 mx-auto text-center" data-cues="slideInDown" data-group="page-title"
                        data-delay="600">
                        <h1 class="fs-58 mb-2 text-light">Announcement</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="container py-10">
        <div class="d-flex justify-content-between align-items-center">
            {{-- <div>
                <span class="text-dark fs-30">Announcement</span>
            </div> --}}
        </div>
    </div>

    <section class="wrapper bg-light">
        <div class="container py-2 py-md-2"> <!-- Reduced padding here -->
            <div class="row">
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
                    <h2 class="fs-15 text-uppercase text-primary text-center">Our News</h2>
                    <h3 class="display-4 mb-6 text-center" style="font-family: 'Arial', sans-serif;">Announcement</h3>
                </div>
            </div>

            @role('Admin')
            <!-- ปุ่ม Add News -->
            <div class="text-center mt-4">
                {{-- <a href="{{ url('/announcementgetedit/0') }}" class="btn btn-primary">Add News</a> --}}
                <a href="{{ url('/announcementgetedit/0') }}" class="btn btn-soft-blue rounded-pill">Add News</a>
            </div>
            @endrole

            <br>

            <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 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="200px" 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">
                                                    <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>

                                                    @role('Admin')
                                                    <!-- ปุ่มลบข้อมูล -->
                                                    <div class="text-center mt-4">
                                                        <form
                                                            action="{{ route('announcementdelete', $item->announcement_id) }}"
                                                            method="POST"
                                                            onsubmit="return confirm('Are you sure you want to delete this announcement?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-red rounded-pill">Delete</button>
                                                        </form>
                                                    </div>
                                                    @endrole
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>




    @include('layouts.footer')
@endsection