@extends('layouts.front')
@section('content')
    <style>
        .notification-wrapper {
            margin-bottom: 15px;
        }

        .notification {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notification-content {
            flex-grow: 1;
        }

        .notification h4 {
            margin: 0;
            font-size: 16px;
        }

        .notification p {
            margin: 5px 0;
            font-size: 14px;
            color: #666;
        }

        .notification time {
            color: #999;
            font-size: 12px;
        }

        .read-more {
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .read-more, .download-btn {
            padding: 5px 10px;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            display: inline-block;
            margin-top: 10px;
        }
        .download-btn {
             background-color: #28a745;
         }
        .description-full {
            max-height: 55px;
            overflow-y: hidden;
        }

        .description-full.active {
            max-height: 100%;
            overflow-y: auto;
        }
    </style>
    <div class="main-content">
        <section class="inner-header divider parallax layer-overlay overlay-dark-5"
            data-bg-img="{{ asset('images/banner-inner.png') }}">
            <div class="container pt-70 pb-20">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <h2 class="title text-white">Early Warning</h2>
                            <ol class="breadcrumb text-center text-black mt-10 header_display">
                                <li><a href="{{ route('front.index') }}">Home</a></li>
                                <li class="active text-gray-silver">Early Warning</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container pt-70 pb-70">
            <div class="row notification-wrapper">
                @foreach ($notifications as $notification)
                    <div class="col-md-12">
                        <div class="notification px-3">
                            <div class="notification-content col-md-8 col-lg-9 col-12">
                                <h4>{{ $notification['title'] }}</h4>
                                <div class="description-full">
                                    {!! $notification['description'] !!}
                                </div>
                                <button class="read-more mt-3">Read More</button>

                                @if ($notification->file->isNotEmpty())
                                    @foreach ($notification->file as $file)
                                        <a href="{{ $file->getUrl() }}" class="download-btn mt-3" download>Download PDF</a>
                                    @endforeach
                                @endif
                            </div>
                            <div class="col-md-4 col-lg-3 col-12">
                                <div datetime="{{ $notification['created_at'] }}">
                                    {{ \Carbon\Carbon::parse($notification['created_at'])->format('d M Y \a\t h:i A') }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $('.read-more').click(function() {
                $('.description-full').toggleClass('active');
                $(this).text($(this).text() == 'Read More' ? 'Read Less' : 'Read More');
            });
        });
    </script>
@endpush