@extends('layout.master')
@section('content')

    <div class="page-heading-block py-4">
        <div class="page-title-block d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center justify-content-between">
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('reports.get') }}">Reports</a></li>
                        <li class="breadcrumb-item active" aria-current="page"> {{ $feedback->resident->full_name }} </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="page-main-content">
        <h2 class="mb-4">Feedback/Report</h2>

        <div class="card">
            <div class="card-body">
                <p><strong>Name:</strong> {{ $feedback->resident->full_name }}</p>
                <p><strong>Category:</strong> {{ $feedback->category->name }}</p>
                <p><strong>Subject:</strong> {{ $feedback->subject }}</p>
                <p><strong>Description:</strong> {{ $feedback->description ?? '-' }}</p>

                <h5 class="mt-4"><strong>Attachments:</strong></h5>
                <div class="image-gallery d-flex flex-wrap">
                    @if($feedback->attachments && count($feedback->attachments) > 0)
                        @foreach($feedback->attachments as $attachment)
                            <div class="me-3 mb-3">
                                <a href="{{ url($attachment->file->public_url) }}" class="popup-link">
                                    <img src="{{ url($attachment->file->public_url) }}" alt="Attachment" class="img-thumbnail" width="150">
                                </a>
                            </div>
                        @endforeach
                    @else
                        <p>No attachments available.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="" alt="Image Preview" id="modalImage">
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        $(document).ready(function() {
            $(".popup-link").magnificPopup({
                type: "image",
                closeBtnInside: false,
            });
        });
    </script>
    @endpush
@endsection