{{--
    Default Charge Card Component (Syria style)
    
    @param $item - The charge method object
    @param $isGuest - Whether user is guest
    @param $isUserVerified - Whether user is verified
--}}
@props(['item', 'isGuest' => false, 'isUserVerified' => true])

<div class="col">
    @if ($isGuest)
        {{-- للزوار: عرض البطاقة بدون رابط --}}
        <div class="card" style="cursor: default;">
            <div class="ratio ratio-1x1">
                <img src="{{ $item->image }}" 
                     alt="{{ $item->name }}"
                     class="card-img-top"
                     onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
            </div>
            <div class="card-body p-1">
                <h6 class="card-title text-wrap mb-0 text-center">{{ $item->name }}</h6>
            </div>
        </div>
    @elseif ($item->requires_verified && !$isUserVerified)
        {{-- يتطلب التحقق --}}
        <div class="card position-relative" style="opacity: 0.6;">
            <div class="ratio ratio-1x1">
                <img src="{{ $item->image }}" 
                     alt="{{ $item->name }}"
                     class="card-img-top"
                     onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
                     style="background: rgba(0,0,0,0.7);">
                    <x-lucide-lock class="text-warning" width="32" height="32" />
                </div>
            </div>
            <div class="card-body p-1">
                <h6 class="card-title text-wrap mb-0 text-center">{{ $item->name }}</h6>
                <small class="text-danger d-block text-center">يتطلب التحقق</small>
            </div>
            <div class="position-absolute bottom-0 start-0 w-100 p-1">
                <a href="{{ route('user.verification.create') }}"
                   class="btn btn-warning btn-sm w-100" style="font-size: 0.7rem;">
                    <x-lucide-user-check width="14" height="14" /> تحقق الآن
                </a>
            </div>
        </div>
    @else
        {{-- البطاقة العادية --}}
        <a href="{{ route('charge.create', $item->id) }}" class="card">
            <div class="ratio ratio-1x1">
                <img src="{{ $item->image }}" 
                     alt="{{ $item->name }}"
                     class="card-img-top"
                     onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
            </div>
            <div class="card-body p-1">
                <h6 class="card-title text-wrap mb-0 text-center">{{ $item->name }}</h6>
            </div>
        </a>
    @endif
</div>