<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
'title' => '',
'subtitle' => '',
'footer' => null,
'showContent' => true,
'py' => 'py-4',
'px' => 'px-4',
'isFoldable' => false,
'isFolded' => false,
'class' => '',
'bodyBg' => 'bg-white',
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
'title' => '',
'subtitle' => '',
'footer' => null,
'showContent' => true,
'py' => 'py-4',
'px' => 'px-4',
'isFoldable' => false,
'isFolded' => false,
'class' => '',
'bodyBg' => 'bg-white',
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<div class="bg-white flex flex-col rounded shadow border border-gray-300 <?php echo e($class); ?>" x-data="{ isFolded: <?php echo \Illuminate\Support\Js::from($isFolded)->toHtml() ?> }">
    <!-- Header -->
    <!--[if BLOCK]><![endif]--><?php if($title || $subtitle): ?>
    <div class="<?php echo e($py); ?> <?php echo e($px); ?> border-b border-gray-200 flex flex-col lg:flex-row lg:items-center lg:justify-between">
        
        <div class="flex items-center justify-between">
            <div>
                <!--[if BLOCK]><![endif]--><?php if($title): ?>
                <h2 class="text-lg font-semibold text-gray-800"><?php echo $title; ?></h2>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                <!--[if BLOCK]><![endif]--><?php if($subtitle): ?>
                <p class="text-sm text-gray-500 mt-1 leading-relaxed"><?php echo e($subtitle); ?></p>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
            </div>

            <!-- Collapse Toggle Button -->
            <!--[if BLOCK]><![endif]--><?php if($isFoldable): ?>
            <button 
                @click="isFolded = !isFolded" 
                class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                :aria-expanded="!isFolded"
            >
                <svg 
                    class="w-5 h-5 text-gray-500 transform transition-transform duration-200" 
                    :class="{ 'rotate-180': isFolded }"
                    fill="none" 
                    stroke="currentColor" 
                    viewBox="0 0 24 24"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
        </div>

        <!-- Named slot "action" for header actions -->
        <!--[if BLOCK]><![endif]--><?php if(isset($action)): ?>
        <div class="mt-4 lg:mt-0">
            <?php echo e($action); ?>

        </div>
        <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
    </div>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->

    <!--[if BLOCK]><![endif]--><?php if(isset($header)): ?>
    <div class="p-6 border-b border-gray-200 mb-4 transition-all duration-200 ease-in-out">
        <?php echo e($header); ?>

    </div>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->

    <!-- Body -->
    <!--[if BLOCK]><![endif]--><?php if($showContent): ?>
    <div 
        class="p-6 flex-1 transition-all duration-200 ease-in-out <?php echo e($bodyBg); ?>"
        x-show="!isFolded"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-2"
    >
        <?php echo e($slot); ?>

    </div>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->

    <!-- Footer -->
    <!--[if BLOCK]><![endif]--><?php if(isset($footer)): ?>
    <div 
        class="p-6 border-t border-gray-200 transition-all duration-200 ease-in-out"
        x-show="!isFolded"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 transform -translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-2"
    >
        <?php echo e($footer); ?>

    </div>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
</div><?php /**PATH D:\WORK\MAARIFA\ANGO\DESKTOP\V4\ango-desktop\resources\views/components/basics/card.blade.php ENDPATH**/ ?>