


<?php $__env->startSection('content'); ?>


<div class="p-10"
    x-data="categoryCreator()"
    x-init="init()"
>

    
    <div x-show="isLoading"
        class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center" style="display: none;">
        <div class="text-white text-lg flex flex-col items-center gap-2">
            <i class="fa-solid fa-spinner fa-spin text-4xl"></i>
            <span class="text-base"><?php echo e(trans('lang.loading')); ?></span>
        </div>
    </div>
    
    
    <div x-show="!isLoading" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col gap-8" style="display: none;">

        
        <div class="rounded-lg shadow-[1px_1px_4px_0px_#e2e8f0] p-6 bg-gradient-to-r from-slate-900 via-blue-800 to-blue-500 flex items-center justify-between">
            <div>
                <h3 class="text-2xl font-bold text-slate-50"><?php echo trans('lang.create_menu_category'); ?></h3>
                <p class="text-sm text-slate-200 mt-1 m-0"><?php echo trans('lang.create_category_desc'); ?></p>
            </div>
            <a href="<?php echo route('category'); ?>" class="px-4 py-2 rounded-md bg-white text-slate-600 text-sm hover:bg-slate-100 hover:text-slate-900 hover:no-underline transition focus:outline-none focus:ring-0 flex items-center gap-2">
                <i class="fa fa-rotate-left"></i>
                <?php echo e(trans('lang.back_to_category_management')); ?>

            </a>
        </div>

        
        <div class="rounded-lg border border-slate-300 shadow-lg overflow-hidden flex flex-col">
            
            <div class="p-6 md:p-8 bg-white flex-grow">
                
                <div class="flex flex-col">
                    
                    <div class="mb-5 w-full md:w-3/5 lg:w-2/5">
                        <label for="category-name" class="block text-sm font-semibold text-gray-700 mb-2"><?php echo e(trans('lang.category_name')); ?></label>
                        <input 
                            type="text" 
                            id="category-name" 
                            x-model="name" 
                            @input.debounce.500ms="validate()"
                            class="w-full px-4 py-2 border !border-slate-300 rounded-lg focus:outline-none focus:ring-0 focus:shadow-none focus:bg-blue-50 transition duration-200" 
                            :class="{'!border-red-500': errors.name}"
                            placeholder="Insert category name" 
                            required>
                        <p x-show="errors.name" x-text="errors.name" class="text-sm text-red-600 mt-1"></p>
                    </div>

                    
                    <div class="mb-6">
                        <p class="text-sm font-semibold text-gray-700 mb-2"><?php echo e(trans('lang.food_publish')); ?></p>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="category_publish" x-model="publish" class="sr-only peer">
                            <div class="relative w-11 h-6 bg-slate-300 rounded-full peer-checked:bg-blue-500 transition-colors after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border after:border-slate-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
                        </label>
                    </div>
                </div>
            </div>

            
            <div class="p-4 bg-slate-50 border-t border-slate-200 text-right">
                <button 
                    type="button" 
                    @click="saveCategory" 
                    :disabled="isSaving || hasErrors"
                    class="uppercase w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-0"
                >
                    <span x-show="!isSaving"><?php echo e(trans('lang.save')); ?></span>
                    <span x-show="isSaving">
                        <i class="fa-solid fa-spinner fa-spin"></i>
                        <?php echo e(trans('lang.saving')); ?>

                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    const serverData = {
        nextOrder: <?php echo json_encode($nextOrder, 15, 512) ?>,
        csrfToken: '<?php echo e(csrf_token()); ?>',
        routeCategory: '<?php echo e(route("category")); ?>',
        apiStore: '<?php echo e(route("api.categories.store")); ?>',
    };

    function categoryCreator() {
        return {
            // State properties
            name: '',
            publish: true,
            nextOrder: serverData.nextOrder,

            // Loading and saving states
            isLoading: false,
            isSaving: false,

            // Validation state
            errors: {
                name: ''
            },

            // Computed property to check for validation errors
            get hasErrors() {
                return !this.name.trim();
            },

            // init() — data already loaded server-side, just activate the menu item
            init() {
                const menu = document.getElementById("menu_menu");
                if (menu) menu.classList.add("active");
            },

            // Validation logic
            validate() {
                if (!this.name.trim()) {
                    this.errors.name = "<?php echo e(trans('lang.validation.category_name_required')); ?>";
                    return false;
                }
                this.errors.name = '';
                return true;
            },

            // saveCategory() is called on button click
            async saveCategory() {
                if (!this.validate()) {
                    return;
                }

                this.isSaving = true;

                try {
                    const res = await fetch(serverData.apiStore, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': serverData.csrfToken,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            name:    this.name,
                            publish: this.publish,
                        }),
                    });

                    if (!res.ok) {
                        const err = await res.json().catch(() => ({}));
                        throw new Error(err.message ?? 'Server error');
                    }

                    window.location.href = serverData.routeCategory;
                } catch (error) {
                    console.error("Error saving category:", error);
                    alert("An error occurred while saving. Please try again later.");
                    this.isSaving = false;
                }
            }
        };
    }
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\pub-and-go-merchant-np\resources\views/category/create.blade.php ENDPATH**/ ?>