عرض الصور وملفات PDF باستخدام Laravel Livewire

لدي ملف مخزّن في storage/members والمستخدم قد يدخل صورة أو pdf وحاليا تعرض للمستخدم الصورة فقط عند النقر على الايقونة أريد عمل شرط  إذا كان من نوع صورة يعرضها للمستخدم وإذا كان pdf يفتحه في نافذة جديدة.

استخدم Laravel livewire

استخدمت من قبل مكتبة mpdf في طباعة صفحة HTML الى PDF

composer require carlos-meneses/laravel-mpdf

هذا الزر يفتح modal الصورة

<td>
    <button type="button" value="" data-title="المسكن"data-image_url="{{ Storage::url($hotel->contract) }}"
        class="show-image-modal dropdown-item" style="padding: 0;height: 33px;">
        <i class="mdi mdi-file-document-outline" style="font-size: 25px; color: rgb(92, 88, 88);"></i>
    </button>
</td>

وهذا show_image.blade.php

<!-- Start image Modal  -->
<div class="modal fade" id="image_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="image_modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content modal-content-maps-images">
            <div class="modal-header">
                <h4 class="modal-title" id="delete_header">عرض المحتوى</h4>
                <i type="reset" data-bs-dismiss="modal" aria-label="Close"
                    class="las las la-times text-danger scale5 cancel-modal"></i>
            </div>
            <div class="modal-body p-0">
                <div>
                    <img id="image_src"class="img-fluid max-hight" src=""
                        style="max-height:450px; width:100%" alt="" srcset="">
                </div>
                <div id="view_media_card_footer"class="card-footer p-2">
                    <video id="video_src" controls style="width: 100%; height: auto"></video>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End image Modal  -->

show_image.js

$(document).on("click", ".show-image-modal", function () {
    if ($(this).data('type_media') === "video") {
        $("#video_src").attr("src", $(this).data('video_url'));
        $("#image_src").hide();
        $("#view_media_card_footer").show();
    } else {
        $("#view_media_card_footer").hide();
        $("#image_src").show();
        $("#image_src").attr("src", $(this).data('image_url'));
    }
    $("#image_modal").modal("show");
});