@extends('frontend.slices.main')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('content')
<style>
    .feature-box-8 .body .icon-holder {
        width: 150px !important;
        height: 150px !important;
    }

    .date-agenda {
        font-size: 18px;
    }

    .feature-box-8 .body .title {
        position: relative !important;
        font-size: 18px !important;
        color: white
    }

    .bulletin-image {
        width: 300px !important;
        height: 300px !important;
        object-fit: cover;
    }

    .feature-box-8 .body {
        position: relative;
        text-align: center;
        padding: 0px 0px 0px !important;
    }

    .feature-box-8 .body .readmore {
        margin-top: 0px !important;
    }
</style>
<div class="section banner-page about">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="title-page" style="background-color: #083472; padding: 5px 5px 5px 5px; border-radius: 5px;">Bulletin </div>
            </div>
        </div>
    </div>
</div>
<div class="section why overlap">
    <div class="container">
        <div class="row">
            @foreach($bulletins as $data)
            <div class="col-md-3">
                <div class="feature-box-8">
                    <div class="media text-center">
                        <img src="{{ url($data->image ?? '') }}" class="bulletin-image">
                    </div>
                    <div class="body">
                        <div class="icon-holder">
                            <span class="date-agenda">
                                {{ $data->periode ?? '' }}
                            </span>
                        </div>
                        <span class="title">{{ $data->title ?? '' }}</span>
                        <a href="{{ url($data->image ?? '') }}" target="_blank" class="readmore">READ MORE</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        {{-- pagginate --}}
        <div style="text-align: center; font-size: 16px;">
            {{ $bulletins->links() }}
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" id="modalImage" class="img-fluid" style="max-width: 100%; height: auto;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
    // When a bulletin image or readmore link is clicked
    $('.bulletin-image, .readmore').click(function(e){
        e.preventDefault(); // Prevent default action (opening image link)
        var imageUrl = $(this).attr('href') || $(this).attr('src'); // Get the image URL
        $('#modalImage').attr('src', imageUrl); // Set the modal image source to the clicked image source
        $('#imageModal').modal('show'); // Show the modal
    });
});
</script>
@endsection