{{--
    Modern Charge Card Component (Mega/Kaiali 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])

@php
    $isLocked = $item->requires_verified && !$isUserVerified;
    $isDisabled = $isGuest || $isLocked;
@endphp

@if ($isGuest)
    {{-- للزوار: عرض البطاقة بدون رابط --}}
    <div class="card-modern card-modern--no-price" style="cursor: default; opacity: 0.8;">
        <div class="card-modern__image-wrapper">
            <img src="{{ $item->image }}" 
                 alt="{{ $item->name }}"
                 class="card-modern__image"
                 onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
        </div>
        <div class="card-modern__overlay {{ ($siteConfig['ui']['card_overlay_style'] ?? 'default') === 'subtle' ? 'card-modern__overlay--subtle' : '' }}"></div>
        <div class="card-modern__content">
            <h6 class="card-modern__title">{{ $item->name }}</h6>
        </div>
    </div>
@elseif ($isLocked)
    {{-- يتطلب التحقق --}}
    <a href="{{ route('user.verification.create') }}" class="text-decoration-none">
        <div class="card-modern card-modern--no-price card-modern--locked">
            <div class="card-modern__image-wrapper">
                <img src="{{ $item->image }}" 
                     alt="{{ $item->name }}"
                     class="card-modern__image"
                     onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
            </div>
            <div class="card-modern__overlay" style="background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 100%);"></div>
            
            {{-- Lock Icon --}}
            <div class="position-absolute top-50 start-50 translate-middle" style="z-index: 5;">
                <x-lucide-lock class="text-warning" width="40" height="40" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));" />
            </div>
            
            <div class="card-modern__content">
                <h6 class="card-modern__title" style="opacity: 0.7;">{{ $item->name }}</h6>
                <div class="card-modern__price" style="background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.3); border-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.5);">
                    <x-lucide-user-check class="me-1" width="14" height="14" /> تحقق الآن
                </div>
            </div>
        </div>
    </a>
@else
    {{-- البطاقة العادية --}}
    <a href="{{ route('charge.create', $item->id) }}" class="text-decoration-none">
        <div class="card-modern card-modern--no-price">
            <div class="card-modern__image-wrapper">
                <img src="{{ $item->image }}" 
                     alt="{{ $item->name }}"
                     class="card-modern__image"
                     onerror="this.onerror=null; this.src='{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}'">
            </div>
            <div class="card-modern__overlay {{ ($siteConfig['ui']['card_overlay_style'] ?? 'default') === 'subtle' ? 'card-modern__overlay--subtle' : '' }}"></div>
            <div class="card-modern__content">
                <h6 class="card-modern__title">{{ $item->name }}</h6>
            </div>
        </div>
    </a>
@endif