<div x-data="{ open: false, name: '', description: '', color: '#4f46e9' }"
     @open-workspace-modal.window="open = true"
     @close-workspace-modal.window="open = false"
     x-show="open"
     class="fixed inset-0 z-[150] overflow-y-auto"
     style="display: none;">
    
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" @click="open = false"></div>

    <!-- Modal Content -->
    <div class="flex min-h-full items-center justify-center p-4 text-center">
        <div class="relative transform overflow-hidden rounded-[2rem] bg-white dark:bg-slate-900 p-8 text-left shadow-2xl transition-all w-full max-w-md border border-slate-200 dark:border-slate-800"
             @click.away="open = false">
            
            <div class="flex items-center justify-between mb-8">
                <h3 class="text-2xl font-bold text-slate-900 dark:text-white">New Workspace</h3>
                <button @click="open = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200">
                    <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>

            <form action="<?php echo e(route('workspaces.store')); ?>" method="POST" class="space-y-6">
                <?php echo csrf_field(); ?>
                
                <div>
                    <label for="workspace_name" class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2 px-1">Workspace Name</label>
                    <input type="text" name="name" id="workspace_name" required x-model="name"
                           class="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-900 dark:text-white focus:border-indigo-500 focus:ring-0 transition-all font-medium placeholder:text-slate-400"
                           placeholder="e.g. Design Team, Personal Project">
                </div>

                <div>
                    <label for="workspace_description" class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2 px-1">Description</label>
                    <textarea name="description" id="workspace_description" rows="3" x-model="description"
                              class="w-full px-5 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-900 dark:text-white focus:border-indigo-500 focus:ring-0 transition-all font-medium placeholder:text-slate-400"
                              placeholder="What is this workspace for?"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-3 px-1">Brand Color</label>
                    <div class="flex flex-wrap gap-3">
                        <?php $__currentLoopData = ['#4f46e9', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#ec4899', '#8b5cf6', '#64748b']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $hex): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <label class="relative cursor-pointer group">
                                <input type="radio" name="color" value="<?php echo e($hex); ?>" class="sr-only" x-model="color">
                                <div :class="color === '<?php echo e($hex); ?>' ? 'ring-2 ring-offset-2 ring-indigo-500 ring-offset-white dark:ring-offset-slate-900' : 'opacity-80 hover:opacity-100'"
                                     class="w-10 h-10 rounded-xl transition-all shadow-sm"
                                     style="background-color: <?php echo e($hex); ?>"></div>
                                <div x-show="color === '<?php echo e($hex); ?>'" class="absolute -top-1 -right-1 bg-white dark:bg-slate-900 rounded-full p-0.5 shadow-sm border border-slate-200 dark:border-slate-700">
                                    <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                </div>
                            </label>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>

                <div class="pt-4 flex gap-4">
                    <button type="button" @click="open = false" 
                            class="flex-1 px-6 py-4 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-all">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="flex-1 px-6 py-4 rounded-2xl bg-indigo-600 text-white font-bold shadow-lg shadow-indigo-600/20 hover:bg-indigo-700 transition-all active:scale-95">
                        Create Workspace
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<?php /**PATH C:\laragon\www\Taskweb\resources\views/partials/workspace-modal.blade.php ENDPATH**/ ?>