@props([
    'value' => null,
    'name' => ''
])

@if($value && $value->$name)
    <div class="col-md-12 mb-4 text-center">
        <img
            src="{{ viewImage($value->$name) }}"
            alt="{{ $name }}"
            class="img-thumbnail popup-image"
            style="max-width: 200px; cursor: pointer;"
        >
    </div>
@endif

<!-- Popup Overlay -->
<div id="image-popup-overlay" style="display:none;">
    <button id="image-popup-close">✕</button>
    <img id="image-popup-content" src="">
</div>

<style>
    /* Popup background */
    #image-popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 999999;
    }

    /* The image */
    #image-popup-content {
        max-width: 95%;
        max-height: 95%;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(255,255,255,0.2);
        transition: 0.3s ease-in-out;
        transform: scale(0.7);
        opacity: 0;
    }

    #image-popup-overlay.show #image-popup-content {
        transform: scale(1);
        opacity: 1;
    }

    #image-popup-close {
        position: absolute;
        top: 20px;
        right: 25px;
        color: white;
        background: rgba(255,255,255,0.15);
        border: none;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        padding: 5px 15px;
        border-radius: 8px;
        backdrop-filter: blur(5px);
        transition: 0.2s;
        z-index: 1000000;
    }

    #image-popup-close:hover {
        background: rgba(255,255,255,0.3);
    }

    /* Thumbnail hover animation */
    .popup-image {
        transition: 0.2s;
    }
    .popup-image:hover {
        transform: scale(1.05);
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const images   = document.querySelectorAll(".popup-image");
    const overlay  = document.getElementById("image-popup-overlay");
    const popupImg = document.getElementById("image-popup-content");
    const closeBtn = document.getElementById("image-popup-close");

    images.forEach(img => {
        img.addEventListener("click", () => {
            popupImg.src = img.src;
            overlay.style.display = "flex";

            setTimeout(() => {
                overlay.classList.add("show");
            }, 10);
        });
    });

    closeBtn.addEventListener("click", () => {
        overlay.classList.remove("show");
        setTimeout(() => {
            overlay.style.display = "none";
            popupImg.src = "";
        }, 300);
    });

    overlay.addEventListener("click", (e) => {
        if (e.target === overlay) {
            overlay.classList.remove("show");
            setTimeout(() => {
                overlay.style.display = "none";
                popupImg.src = "";
            }, 300);
        }
    });
});
</script>