<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div class="flex items-center space-x-4">
            <a href="<?php echo e(route('items.index')); ?>" 
               class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-xl transition-all duration-200 flex items-center justify-center">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Add New Item</h1>
                <p class="text-gray-600 text-sm mt-0.5">Create a new laundry item with pricing</p>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="p-6">
        <div class="max-w-4xl mx-auto">
            <form method="POST" action="<?php echo e(route('items.store')); ?>" class="space-y-8">
                <?php echo csrf_field(); ?>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- Item Form -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Basic Information -->
                        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100">
                            <div class="p-6">
                                <h3 class="text-xl font-bold text-gray-900 mb-6">Basic Information</h3>
                                <div class="space-y-6">
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                            Item Name <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="name" id="name" value="<?php echo e(old('name')); ?>" required
                                               placeholder="e.g., Men's Shirt, Wedding Dress, Suit Jacket"
                                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                        <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="mt-2 text-sm text-red-600"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>

                                    <div>
                                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                                            Description (Optional)
                                        </label>
                                        <textarea name="description" id="description" rows="4" 
                                                  placeholder="Describe the item, any special care instructions, or notes..."
                                                  class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"><?php echo e(old('description')); ?></textarea>
                                        <?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="mt-2 text-sm text-red-600"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>

                                    <div>
                                        <label for="category_id" class="block text-sm font-medium text-gray-700 mb-2">
                                            Category <span class="text-red-500">*</span>
                                        </label>
                                        <select name="category_id" id="category_id" required
                                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 <?php $__errorArgs = ['category_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                            <option value="">Select a category...</option>
                                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($category->id); ?>" <?php echo e(old('category_id') == $category->id ? 'selected' : ''); ?>>
                                                    <?php echo e($category->name); ?>

                                                </option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </select>
                                        <?php $__errorArgs = ['category_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="mt-2 text-sm text-red-600"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pricing Information -->
                        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100">
                            <div class="p-6">
                                <h3 class="text-xl font-bold text-gray-900 mb-6">Pricing Information</h3>
                                <div class="space-y-6">
                                    <div>
                                        <label for="base_price" class="block text-sm font-medium text-gray-700 mb-2">
                                            Base Price (₦) <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-gray-500 sm:text-sm">₦</span>
                                            </div>
                                            <input type="number" name="base_price" id="base_price" step="0.01" min="0" max="999999.99" 
                                                   value="<?php echo e(old('base_price')); ?>" required
                                                   placeholder="0.00"
                                                   class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 <?php $__errorArgs = ['base_price'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                                        </div>
                                        <?php $__errorArgs = ['base_price'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <p class="mt-2 text-sm text-red-600"><?php echo e($message); ?></p>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        <p class="mt-2 text-sm text-gray-600">
                                            This is the base price before any additional charges (color separation, packaging, etc.)
                                        </p>
                                    </div>

                                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                                        <h4 class="text-sm font-semibold text-blue-900 mb-2">Pricing Notes</h4>
                                        <ul class="text-sm text-blue-800 space-y-1">
                                            <li>• Color separation adds 10% to the base price for white items</li>
                                            <li>• Hanging packaging adds 5% to the total order</li>
                                            <li>• Prices are displayed in Nigerian Naira (₦)</li>
                                            <li>• You can update prices later using bulk pricing tools</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Item Status -->
                        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100">
                            <div class="p-6">
                                <h3 class="text-xl font-bold text-gray-900 mb-6">Item Status</h3>
                                <div class="space-y-4">
                                    <div class="flex items-center">
                                        <input type="checkbox" name="is_active" id="is_active" value="1" 
                                               <?php echo e(old('is_active', true) ? 'checked' : ''); ?>

                                               class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                                        <label for="is_active" class="ml-3 text-sm font-medium text-gray-700">
                                            Active (available for orders)
                                        </label>
                                    </div>
                                    <p class="text-sm text-gray-600">
                                        Inactive items will not be available when creating new orders, but existing orders with this item will not be affected.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Preview & Actions -->
                    <div class="lg:col-span-1">
                        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 sticky top-6">
                            <div class="p-6">
                                <h3 class="text-xl font-bold text-gray-900 mb-6">Preview</h3>
                                
                                <div class="space-y-4" x-data="itemPreview()">
                                    <div class="p-4 bg-gray-50 rounded-xl">
                                        <div class="flex items-center mb-3">
                                            <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white font-bold text-sm">
                                                <span x-text="getInitial()">?</span>
                                            </div>
                                            <div class="ml-3">
                                                <div class="text-sm font-medium text-gray-900" x-text="getName()">Item Name</div>
                                                <div class="text-xs text-gray-500" x-text="getCategory()">Category</div>
                                            </div>
                                        </div>
                                        <div class="text-lg font-bold text-gray-900" x-text="getPrice()">₦0.00</div>
                                        <div class="text-xs text-gray-500">Base price</div>
                                    </div>

                                    <div class="text-sm text-gray-600">
                                        <h4 class="font-semibold mb-2">Effective Pricing:</h4>
                                        <ul class="space-y-1">
                                            <li>• Regular: <span x-text="getPrice()">₦0.00</span></li>
                                            <li>• With color separation: <span x-text="getPriceWithSeparation()">₦0.00</span></li>
                                            <li>• With hanging: <span x-text="getPriceWithHanging()">₦0.00</span></li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="mt-8 pt-6 border-t border-gray-200">
                                    <div class="flex space-x-3">
                                        <a href="<?php echo e(route('items.index')); ?>" 
                                           class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-3 px-4 rounded-xl transition-all duration-200 text-center">
                                            Cancel
                                        </a>
                                        <button type="submit" 
                                                class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 px-4 rounded-xl transition-all duration-200 ease-in-out transform hover:scale-105 shadow-lg hover:shadow-xl">
                                            Create Item
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        function itemPreview() {
            return {
                getName() {
                    const name = document.getElementById('name')?.value || 'Item Name';
                    return name.length > 20 ? name.substring(0, 20) + '...' : name;
                },
                
                getInitial() {
                    const name = document.getElementById('name')?.value || '?';
                    return name.charAt(0).toUpperCase();
                },
                
                getCategory() {
                    const select = document.getElementById('category_id');
                    const selectedOption = select?.options[select.selectedIndex];
                    return selectedOption?.text || 'Category';
                },
                
                getPrice() {
                    const price = parseFloat(document.getElementById('base_price')?.value || 0);
                    return '₦' + price.toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },
                
                getPriceWithSeparation() {
                    const price = parseFloat(document.getElementById('base_price')?.value || 0);
                    const withSeparation = price * 1.1; // 10% extra for whites
                    return '₦' + withSeparation.toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },
                
                getPriceWithHanging() {
                    const price = parseFloat(document.getElementById('base_price')?.value || 0);
                    const withHanging = price * 1.05; // 5% extra for hanging
                    return '₦' + withHanging.toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                }
            }
        }
        
        // Update preview when inputs change
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = ['name', 'category_id', 'base_price'];
            inputs.forEach(id => {
                const element = document.getElementById(id);
                if (element) {
                    element.addEventListener('input', () => {
                        // Trigger Alpine.js reactivity
                        element.dispatchEvent(new Event('change'));
                    });
                }
            });
        });
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH /home/rxilrzxf/laundry.paulotech.com.ng/resources/views/items/create.blade.php ENDPATH**/ ?>