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

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['id', 'title', 'size' => 'md']));

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((['id', 'title', 'size' => 'md']), '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); ?>

<?php
    $sizeClasses = [
        'sm' => 'max-w-md',
        'md' => 'max-w-lg',
        'lg' => 'max-w-2xl',
        'xl' => 'max-w-4xl',
    ];
?>

<div id="<?php echo e($id); ?>" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50 flex items-center justify-center p-4 animate-fadeIn">
    <div class="bg-white rounded-2xl <?php echo e($sizeClasses[$size]); ?> w-full max-h-[90vh] overflow-y-auto shadow-2xl border border-[#e8ddd0] animate-slideUp">
        <div class="flex items-center justify-between p-6 border-b border-[#e8ddd0] bg-gradient-to-r from-[#faf8f5] to-white">
            <h3 class="text-2xl font-serif font-bold text-[#524438]"><?php echo e($title); ?></h3>
            <button onclick="closeModal('<?php echo e($id); ?>')" class="text-[#9d8566] hover:text-[#7d6a52] transition-colors p-2 hover:bg-[#f5f0e8] rounded-full">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="p-6">
            <?php echo e($slot); ?>

        </div>
    </div>
</div>

<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Close modal on outside click
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('fixed')) {
        const modal = e.target.closest('.fixed');
        if (modal) {
            closeModal(modal.id);
        }
    }
});
</script>


<?php /**PATH C:\xampp\htdocs\catalogue-builder\resources\views/components/modal.blade.php ENDPATH**/ ?>