@extends('layouts.front')

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

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

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

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

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

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

        .read-more {
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .download-btn {
            padding: 5px 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .description-full {
            max-height: 55px;
            overflow-y: hidden;
        }

        .description-full.active {
            max-height: 100%;
            overflow-y: auto;
        }

        .publication-image {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        .publication-image-container {
             position: relative;
             width: 100%;
             padding-bottom: 56.25%; /* 16:9 aspect ratio */
             overflow: hidden;
         }

        .publication-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* This ensures the image covers the container while maintaining its aspect ratio */
        }
    </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">Publications & Reports</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">Publications & Reports</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container pt-70 pb-70">
            <div class="row publication-wrapper">
                @foreach ($reports as $publication)
                    <div class="col-md-12">
                        <div class="publication px-3">
                            <div class="publication-content col-md-8 col-lg-9 col-12">
                                <h4>{{ $publication['title'] }}</h4>
                                @if (!empty($publication['image']))
                                    <div class="publication-image-container">
                                        <img src="{{ $publication['image']['url'] }}" alt="{{ $publication['title'] }}" class="publication-image">
                                    </div>
                                @endif

                                <div class="description-full">
                                    {!! $publication['description'] !!}
                                </div>
                                <button class="read-more mt-3">Read More</button>
                                @if (!empty($publication['pdf_file']))
                                    <a href="{{ $publication->pdf_file->getUrl() }}" class="download-btn mt-3"
                                        download>Download PDF</a>
                                @endif
                            </div>
                            <div class="col-md-4 col-lg-3 col-12">
                                <div datetime="{{ $publication['created_at'] }}">
                                    {{ \Carbon\Carbon::parse($publication['created_at'])->format('d M Y \a\t h:i A') }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            {{ $reports->links() }}
        </div>
    </div>
@endsection

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