<?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>
            <h1 class="text-lg font-semibold text-gray-800">Add Customer</h1>
            <p class="text-xs text-gray-400 mt-0.5">Create a buyer profile. Verifies NTN/CNIC live with FBR.</p>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="max-w-3xl" x-data="customerForm()" x-init="init()">

        <form @submit.prevent="submit" class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 space-y-5">

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

                
                <div class="sm:col-span-2">
                    <label class="block text-xs font-medium text-gray-500 mb-1">NTN or CNIC</label>
                    <div class="flex gap-2">
                        <div class="relative flex-grow">
                            <input type="text" x-model="form.ntn_cnic" @input.debounce.500ms="onNtnInput"
                                placeholder="e.g. 1234567-8 or 42101-1234567-1"
                                class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400 font-mono"
                                :class="errors.ntn_cnic && 'border-red-400'">

                            <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5"
                                x-show="fbrVerifying">
                                <span
                                    class="h-4 w-4 rounded-full border-2 border-indigo-500 border-t-transparent animate-spin"></span>
                            </div>
                        </div>
                        <button type="button" @click="verifyFbr()"
                            :disabled="!form.ntn_cnic || form.ntn_cnic.length < 5 || fbrVerifying"
                            class="px-3.5 py-2 text-xs font-medium rounded-lg border border-indigo-100 text-indigo-600 bg-indigo-50/50 hover:bg-indigo-100 disabled:opacity-50 disabled:bg-gray-50 disabled:border-gray-100 disabled:text-gray-400 transition whitespace-nowrap">
                            Verify with FBR
                        </button>
                    </div>
                    <p class="text-xs text-red-500 mt-1" x-show="errors.ntn_cnic" x-text="errors.ntn_cnic?.[0]"></p>

                    
                    <div class="mt-2" x-show="fbrStatusMessage">
                        <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium"
                            :class="fbrStatusType === 'success' ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'">
                            <span class="w-1.5 h-1.5 rounded-full"
                                :class="fbrStatusType === 'success' ? 'bg-green-500' : 'bg-amber-500'"></span>
                            <span x-text="fbrStatusMessage"></span>
                        </div>
                    </div>
                </div>

                
                <div class="sm:col-span-2">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Customer / Business Name <span
                            class="text-red-500">*</span></label>
                    <input type="text" x-model="form.name"
                        placeholder="Enter customer name or auto-fetch using FBR lookup"
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"
                        :class="errors.name && 'border-red-400'">
                    <p class="text-xs text-red-500 mt-1" x-show="errors.name" x-text="errors.name?.[0]"></p>
                </div>

                
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">FBR Registration Type <span
                            class="text-red-500">*</span></label>
                    <select x-model="form.registration_type"
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"
                        :class="errors.registration_type && 'border-red-400'">
                        <option value="Unregistered">Unregistered (End Consumer / Non-filer)</option>
                        <option value="Registered">Registered (Sales Tax Filer)</option>
                    </select>
                    <p class="text-xs text-red-500 mt-1" x-show="errors.registration_type"
                        x-text="errors.registration_type?.[0]"></p>
                </div>

                
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Province</label>
                    <select x-model="form.province"
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                        <option value="">Select Province</option>

                        <?php $__currentLoopData = config('constants.provinces'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($value); ?>" <?php echo e(old('province', $customer->province ?? '') == $value ? 'selected' : ''); ?>>
                                <?php echo e($label); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                    <p class="text-xs text-red-500 mt-1" x-show="errors.province" x-text="errors.province?.[0]"></p>
                </div>

                
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Phone Number</label>
                    <input type="text" x-model="form.phone" placeholder="e.g. 03001234567"
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                    <p class="text-xs text-red-500 mt-1" x-show="errors.phone" x-text="errors.phone?.[0]"></p>
                </div>

                
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Email Address</label>
                    <input type="email" x-model="form.email" placeholder="customer@example.com"
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                    <p class="text-xs text-red-500 mt-1" x-show="errors.email" x-text="errors.email?.[0]"></p>
                </div>

                
                <div class="sm:col-span-2">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Address</label>
                    <textarea x-model="form.address" rows="3" placeholder="Full billing address..."
                        class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"></textarea>
                    <p class="text-xs text-red-500 mt-1" x-show="errors.address" x-text="errors.address?.[0]"></p>
                </div>

                
                <div class="sm:col-span-2 flex items-center gap-3">
                    <label class="flex items-center gap-2 text-xs font-medium text-gray-500 cursor-pointer">
                        <input type="checkbox" x-model="form.is_active"
                            class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-400">
                        Active & available for invoices
                    </label>
                </div>

            </div>

            
            <div class="pt-4 border-t border-gray-100 flex items-center justify-end gap-3">
                <a href="<?php echo e(route('customers.index')); ?>"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                    Cancel
                </a>
                <button type="submit" :disabled="saving"
                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 transition">
                    <span class="h-4 w-4 rounded-full border-2 border-white border-t-transparent animate-spin"
                        x-show="saving"></span>
                    Save Customer
                </button>
            </div>

        </form>

    </div>

    <script>
        function customerForm() {
            return {
                form: {
                    name: '',
                    ntn_cnic: '',
                    registration_type: 'Unregistered',
                    province: '',
                    address: '',
                    phone: '',
                    email: '',
                    is_active: true,
                },
                errors: {},
                saving: false,
                fbrVerifying: false,
                fbrStatusMessage: '',
                fbrStatusType: '',
                lastCheckedNtn: '',

                init() {
                    // Initial load configurations
                },

                onNtnInput() {
                    if (this.form.ntn_cnic && this.form.ntn_cnic.length >= 7 && this.form.ntn_cnic !== this.lastCheckedNtn) {
                        this.verifyFbr();
                    }
                },

                async verifyFbr() {
                    const value = this.form.ntn_cnic ? this.form.ntn_cnic.trim() : '';
                    if (!value) return;

                    this.fbrVerifying = true;
                    this.fbrStatusMessage = '';
                    this.lastCheckedNtn = value;

                    try {
                        const res = await apiFetch(`/fbr/customer-lookup?ntn_cnic=${encodeURIComponent(value)}`);
                        const data = res.data || res;

                        if (data && data.registration_type) {
                            this.form.registration_type = data.registration_type;
                            this.fbrStatusMessage = `FBR Verified: ${data.registration_type}`;
                            this.fbrStatusType = 'success';
                            notify(`FBR verification: ${data.registration_type}`);
                        } else {
                            this.fbrStatusMessage = 'Taxpayer registration details not found. You can select manually.';
                            this.fbrStatusType = 'warning';
                        }
                    } catch (e) {
                        this.fbrStatusMessage = 'FBR API check failed. You can select manually.';
                        this.fbrStatusType = 'warning';
                    } finally {
                        this.fbrVerifying = false;
                    }
                },

                async submit() {
                    this.errors = {};
                    this.saving = true;
                    try {
                        await apiFetch('<?php echo e(route('customers.store')); ?>', { method: 'POST', body: this.form });
                        flashAndRedirect('Customer created.', 'success', '<?php echo e(route('customers.index')); ?>');
                    } catch (e) {
                        if (e.status === 422) {
                            this.errors = e.errors;
                        }
                    } finally {
                        this.saving = false;
                    }
                },
            };
        }
    </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 /www/wwwroot/electechengineeringsolutions.shiningerp.com/resources/views/customers/create.blade.php ENDPATH**/ ?>