@if (!empty($popups))
    @foreach($popups as $key =>$popup)
    <div class="modal fade" id="exampleModal{{$key+1}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="exampleModalLabel" style="text-align: center">{{ $popup->title }}</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if ($popup->file->isNotEmpty())
                        <figure>
                        <img class="img-pop"  src="{{ url('/uploads/doc/') }}/{{ $popup->file[0]->filename }}"
                            alt="{{ $popup->file[0]->filename }}">
                        </figure>
{{--                        <object data="{{ url('/uploads/doc/') }}/{{ $popup->file[0]->filename }}" type="application/pdf" width="100%" height="100%">--}}
{{--                            <p> PDF/Images not Shown <a href="{{ url('/uploads/doc/') }}/{{ $popup->file[0]->filename }}" style="color: blue">Click here--></a></p>--}}
{{--                        </object>--}}
                    @else
                        <p>New Notice</p>
                    @endif

                </div>
                <div class="modal-footer">
{{--                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>--}}
                    <a href="{{ $popup->description }}"><button type="button" class="btn btn-primary">Click
                            Here!!</button></a>
                </div>
            </div>
        </div>
    </div>
                        @endforeach
@else
@endif

<style>
    @media (max-width: 768px) {
        .modal-body {
            height: auto;
        }
        .modal-title{
            font-size: 16px;
        }
    }

    @media (min-width: 768px) {
        .modal-body {
            height: auto;
        }
        .modal-title{
            font-size: 22px;
        }
    }
</style>