@php

$target = $target ?? "";

$col        = $col ??4;
$col_class  = "col-md-$col ";

$url = "javascript:void(0);";
$has_url = false;
if($route) {
    $url = route($route, $parameters ?? []);
	$has_url = true;

}
@endphp
<style>
    .label-txt {
        font-size: 20px;
        font-weight: bold;
        padding-left: 4px;
    }

    .icon-container i {
        font-size: 15px; 
        color: #000;
        position: absolute;
        top: 2px; 
        right: 5px;
    }

    @media (max-width: 1400px) {
        #custom-width {
            min-width: 50%;
        }
    }
    @media (max-width: 576px) {
    .center-image {
        display: flex;
        justify-content: center;  /* Center-aligns content */
        text-align: center;
    }

    .center-image .responsive-img {
        display: block;           /* Allows centering with text-align */
        margin: 0 auto;           /* Centers the image within its container */
    }
}

</style>

    <div class="{{ $col_class }}" id="custom-width" style="position: relative;">
        <br><br>
        
        <!-- Clickable card part -->
        <div class="card {{$class ?? ''}}" style="cursor:pointer;" data-url="{{$url}}" data-target="{{$target}}" onclick="redirectToUrl(this);">
            <span class="center-image">
                @if(!empty($imagepath)) 
                    <img class="responsive-img" src="{{ asset($imagepath) }}" style="height:85px; vertical-align:top;" />
                @elseif(!empty($icon))
                    {!! $icon !!}
                @endif
            </span>
            
            <a class="center-image waves-effect text-black {{$anchor_class ?? ''}} m-t-10"  target="{{$target}}">
                <span class="label-txt" style="color: #555;">{{$label}}<br> <span style="padding-left: 4px;">{{ $value }}</span></span>
            </a>
            
            <!-- Eye icon inside the card, positioned absolutely -->
            @if($show_eye_icon)
                <div class="icon-container">
                    <a onclick="openModal(this);" data-id="{{ $modal_id }}">
                        <i class="fa fa-eye"></i>
                    </a>
                </div>
            @endif
        </div>
    </div>
    
    
    <script>
        function redirectToUrl(e) {
        
           let url    = e.getAttribute("data-url");
           let target = e.getAttribute("data-target") || "_self";
            if (url) {
                window.open(url, target);
            } else {
                window.location.href = url;
            }
        }

        function openModal(e) {
            let modal_id = $(e).data('id');
            $(`#${modal_id}`).modal('show');
        }
    </script>