

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

<div id="main-wrapper" class="p-10"
    x-data="createVoucherAlpine()" x-init="init()">

    
    <div x-show="isSaving"
        class="fixed inset-0 bg-black bg-opacity-80 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.processing')); ?></span>
        </div>
    </div>

    <div class="flex flex-col gap-8">

        
        <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 e(trans('lang.create_voucher')); ?></h3>
                <p class="text-sm text-slate-200 mt-1 m-0"><?php echo e(trans('lang.create_voucher_desc')); ?></p>
            </div>
            <a href="<?php echo e(route('voucher_master')); ?>"
                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 flex items-center gap-2">
                <i class="fa fa-rotate-left"></i>
                <?php echo e(trans('lang.go_back')); ?>

            </a>
        </div>

        
        <div class="rounded-lg border !border-slate-300 shadow-[1px_1px_4px_0px_#e2e8f0] overflow-hidden flex flex-col">

            <div class="bg-slate-900 px-6 py-4">
                <h3 class="text-xl font-bold text-white m-0"><?php echo e(trans('lang.voucher_details')); ?></h3>
            </div>

            <div class="p-6 bg-white flex flex-col gap-5 flex-grow">

                
                <div class="w-full">
                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.voucher_name')); ?></label>
                    <input type="text" x-model="voucher.voucher_name"
                        class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition"
                        :class="{'!border-red-500': errors.voucher_name}">
                    <p x-show="errors.voucher_name" x-text="errors.voucher_name" class="text-sm text-red-600 mt-1"></p>
                </div>

                
                <div class="w-full">
                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.title')); ?></label>
                    <input type="text" x-model="voucher.title"
                        class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition"
                        :class="{'!border-red-500': errors.title}">
                    <p x-show="errors.title" x-text="errors.title" class="text-sm text-red-600 mt-1"></p>
                </div>

                
                <div class="w-full">
                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.food_description')); ?></label>
                    <textarea rows="4" x-model="voucher.description"
                        class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition"></textarea>
                </div>

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.type')); ?></label>
                        <select x-model.number="voucher.type"
                            class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                            <option value="1">Free Product</option>
                            <option value="2">Partially Paid</option>
                        </select>
                    </div>

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.trigger')); ?></label>
                        <select x-model.number="voucher.trigger"
                            class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                            <option value="1">Registration</option>
                            <option value="2">Festive Offer</option>
                            <option value="3">Referral Link</option>
                        </select>
                    </div>
                </div>

                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.limit_type')); ?></label>
                        <select x-model.number="voucher.limit_type"
                            class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                            <option value="1">One Time Use</option>
                            <option value="2">Max 2 Redemption</option>
                        </select>
                    </div>

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.validity')); ?> (days)</label>
                        <input type="number" x-model.number="voucher.validity" min="1"
                            class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                    </div>

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.status')); ?></label>
                        <select x-model.number="voucher.status"
                            class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                            <option value="1"><?php echo e(trans('lang.active')); ?></option>
                            <option value="0"><?php echo e(trans('lang.inactive')); ?></option>
                        </select>
                    </div>
                </div>

                
                <div class="w-full">
                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo e(trans('lang.image')); ?></label>
                    <div x-show="imgPreview" class="mb-2 w-32 h-32 rounded-lg overflow-hidden border !border-slate-300" style="display:none;">
                        <img :src="imgPreview" class="w-full h-full object-cover">
                    </div>
                    <input type="file" accept="image/*" @change="handleImageSelect($event)"
                        class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full focus:outline-none focus:ring-0 transition cursor-pointer">
                </div>

                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1">Banner Background Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" x-model="voucher.banner_bg_color"
                                class="h-10 w-12 rounded border !border-slate-300 cursor-pointer p-0.5 shrink-0">
                            <input type="text" x-model="voucher.banner_bg_color" maxlength="7"
                                class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full font-mono uppercase focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                        </div>
                    </div>

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1">Status Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" x-model="voucher.status_color"
                                class="h-10 w-12 rounded border !border-slate-300 cursor-pointer p-0.5 shrink-0">
                            <input type="text" x-model="voucher.status_color" maxlength="7"
                                class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full font-mono uppercase focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                        </div>
                    </div>

                    
                    <div class="w-full">
                        <label class="block text-sm text-slate-500 font-medium mb-1">Status Text Color</label>
                        <div class="flex items-center gap-2">
                            <input type="color" x-model="voucher.status_text_color"
                                class="h-10 w-12 rounded border !border-slate-300 cursor-pointer p-0.5 shrink-0">
                            <input type="text" x-model="voucher.status_text_color" maxlength="7"
                                class="text-slate-700 border !border-slate-300 rounded-lg py-2 px-3 w-full font-mono uppercase focus:outline-none focus:ring-0 focus:bg-blue-50 transition">
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="p-4 bg-slate-50 border-t border-slate-200">
                <button @click="saveVoucher()" :disabled="isSaving"
                    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">
                    <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 x-show="notification.show"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 translate-y-4"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 translate-y-4"
            :class="notification.type === 'success' ? 'bg-green-500' : 'bg-red-500'"
            class="fixed bottom-6 right-6 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-3"
            style="display: none;">
            <i :class="notification.type === 'success' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'"></i>
            <span x-text="notification.message"></span>
        </div>

    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    function createVoucherAlpine() {
        return {
            isSaving: false,
            notification: { show: false, type: 'success', message: '' },

            voucher: {
                voucher_name: '',
                title: '',
                description: '',
                type: 1,
                trigger: 1,
                limit_type: 1,
                validity: 30,
                status: 1,
                banner_bg_color: '#ffffff',
                status_color: '#ffffff',
                status_text_color: '#000000',
            },

            selectedFile: null,
            imgPreview: null,

            errors: {
                voucher_name: '',
                title: '',
            },

            init() {},

            handleImageSelect(event) {
                const file = event.target.files[0];
                if (!file) return;
                this.selectedFile = file;
                this.imgPreview = URL.createObjectURL(file);
            },

            validate() {
                this.errors = { voucher_name: '', title: '' };
                let valid = true;

                if (!this.voucher.voucher_name.trim()) {
                    this.errors.voucher_name = '<?php echo e(trans("lang.validation.product_name_required")); ?>';
                    valid = false;
                }
                if (!this.voucher.title.trim()) {
                    this.errors.title = 'Title is required.';
                    valid = false;
                }
                return valid;
            },

            async saveVoucher() {
                if (!this.validate()) return;

                this.isSaving = true;

                try {
                    const form = new FormData();
                    ['voucher_name','title','description','type','trigger','limit_type','validity','status',
                     'banner_bg_color','status_color','status_text_color'].forEach(f => form.append(f, this.voucher[f] ?? ''));
                    if (this.selectedFile) form.append('img_file', this.selectedFile);

                    const response = await fetch('<?php echo e(route("voucher.store")); ?>', {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        },
                        body: form
                    });

                    if (!response.ok) throw new Error(`HTTP ${response.status}`);

                    this.showNotification('<?php echo e(trans("lang.notifications.details_saved_success")); ?>', 'success');

                    setTimeout(() => {
                        window.location.href = '<?php echo e(route("voucher_master")); ?>';
                    }, 1500);

                } catch (e) {
                    this.showNotification('Save failed: ' + e.message, 'error');
                } finally {
                    this.isSaving = false;
                }
            },

            showNotification(message, type = 'success') {
                this.notification = { show: true, type, message };
                setTimeout(() => { this.notification.show = false; }, 4000);
            },
        }
    }
</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/vouchers/create.blade.php ENDPATH**/ ?>