

<?php $__env->startSection('meta_title', 'Start Free Trial - ' . config('app.name')); ?>
<?php $__env->startSection('meta_description', 'Register your company for a free HRMS trial with OTP-verified mobile onboarding.'); ?>

<?php $__env->startSection('content'); ?>
<section class="section-space brand-gradient">
    <div class="container">
        <div class="row g-4 align-items-stretch">
            <div class="col-lg-6">
                <div class="card-soft h-100 p-4 p-lg-5">
                    <h1 class="display-6 fw-bold mb-3 hr-title">Start your HRMS trial in minutes</h1>
                    <p class="text-muted mb-4">
                        Capture your company details, verify your mobile with OTP, and our team will quickly schedule onboarding.
                    </p>
                    <div class="d-grid gap-3">
                        <div class="d-flex gap-3">
                            <div class="rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center" style="width: 34px; height: 34px;">
                                <i class="bi bi-check-lg"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Fast onboarding</div>
                                <div class="text-muted small">Get a guided setup call from our product team.</div>
                            </div>
                        </div>
                        <div class="d-flex gap-3">
                            <div class="rounded-circle bg-warning-subtle text-warning d-flex align-items-center justify-content-center" style="width: 34px; height: 34px;">
                                <i class="bi bi-shield-check"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">India-first compliance</div>
                                <div class="text-muted small">Payroll workflows designed for Indian businesses.</div>
                            </div>
                        </div>
                        <div class="d-flex gap-3">
                            <div class="rounded-circle bg-info-subtle text-info d-flex align-items-center justify-content-center" style="width: 34px; height: 34px;">
                                <i class="bi bi-people"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Team-ready from day one</div>
                                <div class="text-muted small">Manage attendance, leave, and employee lifecycle in one platform.</div>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mt-4">
                        <div class="card-body p-2">
                            <img src="<?php echo e(asset('website/images/image.png')); ?>" class="img-fluid rounded-3" alt="KiyoHRMS product dashboard preview">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card-soft h-100 p-4 p-lg-5">
                    <h2 class="h4 fw-bold mb-2">Register your company</h2>
                    <p class="text-muted mb-4">Fill this form to request your free trial.</p>

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
                        <div class="alert alert-success"><?php echo e(session('success')); ?></div>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                    <form method="post" action="<?php echo e(route('register.store')); ?>" id="leadRegisterForm" class="row g-3">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" id="otpVerified" value="0">

                        <div class="col-md-6">
                            <label for="company_name" class="form-label">Company name</label>
                            <input id="company_name" name="company_name" type="text" value="<?php echo e(old('company_name')); ?>" required class="form-control">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['company_name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-md-6">
                            <label for="contact_person_name" class="form-label">Contact person name</label>
                            <input id="contact_person_name" name="contact_person_name" type="text" value="<?php echo e(old('contact_person_name')); ?>" required class="form-control">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['contact_person_name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-md-6">
                            <label for="employee_count" class="form-label">Employee count</label>
                            <input id="employee_count" name="employee_count" type="number" min="1" value="<?php echo e(old('employee_count')); ?>" required class="form-control">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['employee_count'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">Work email (optional)</label>
                            <input id="email" name="email" type="email" value="<?php echo e(old('email')); ?>" class="form-control">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-12">
                            <label for="mobile" class="form-label">Mobile number</label>
                            <div class="d-flex gap-2">
                                <div class="input-group" style="max-width: calc(100% - 130px);">
                                    <span class="input-group-text">+91</span>
                                    <input id="mobile" name="mobile" type="text" maxlength="10" value="<?php echo e(old('mobile')); ?>" required placeholder="10-digit mobile number" class="form-control">
                                </div>
                                <button type="button" id="sendOtpBtn" class="btn btn-dark d-none text-nowrap" style="min-width: 120px;">Send OTP</button>
                            </div>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['mobile'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label for="otp" class="form-label mb-0">OTP</label>
                                <span id="otpVerifiedBadge" class="badge text-bg-success d-none">Verified</span>
                            </div>
                            <div class="d-flex gap-2">
                                <input id="otp" name="otp" type="text" maxlength="6" class="form-control">
                                <button type="button" id="verifyOtpBtn" class="btn btn-kiyo" style="min-width: 110px;">Verify</button>
                            </div>
                            <div id="otpStatus" class="form-text"></div>
                        </div>

                        <div class="col-12">
                            <label for="notes" class="form-label">Requirement notes (optional)</label>
                            <textarea id="notes" name="notes" rows="3" class="form-control"><?php echo e(old('notes')); ?></textarea>
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['notes'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>

                        <div class="col-12">
                            <button id="submitBtn" type="submit" class="btn btn-kiyo w-100">Start Free Trial <i class="bi bi-arrow-right-short"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        const csrfToken = '<?php echo e(csrf_token()); ?>';
        const otpStatus = document.getElementById('otpStatus');
        const sendOtpBtn = document.getElementById('sendOtpBtn');
        const verifyOtpBtn = document.getElementById('verifyOtpBtn');
        const mobileInput = document.getElementById('mobile');
        const otpInput = document.getElementById('otp');
        const otpVerifiedInput = document.getElementById('otpVerified');
        const otpVerifiedBadge = document.getElementById('otpVerifiedBadge');
        const leadRegisterForm = document.getElementById('leadRegisterForm');
        let resendSeconds = 0;
        let resendTimer = null;

        const isValidIndianMobile = (mobile) => /^[6-9]\d{9}$/.test(mobile);
        const setSendButtonState = () => {
            const valid = isValidIndianMobile(mobileInput.value.trim());
            if (valid) {
                sendOtpBtn.classList.remove('d-none');
            } else {
                sendOtpBtn.classList.add('d-none');
            }
            sendOtpBtn.disabled = !valid || resendSeconds > 0;
            if (resendSeconds > 0) {
                sendOtpBtn.textContent = `Resend in ${resendSeconds}s`;
            } else {
                sendOtpBtn.textContent = 'Send OTP';
            }
        };

        const startResendTimer = (seconds) => {
            resendSeconds = seconds;
            setSendButtonState();
            if (resendTimer) {
                clearInterval(resendTimer);
            }
            resendTimer = setInterval(() => {
                resendSeconds -= 1;
                setSendButtonState();
                if (resendSeconds <= 0) {
                    clearInterval(resendTimer);
                    resendTimer = null;
                }
            }, 1000);
        };

        const setStatus = (message, ok) => {
            otpStatus.textContent = message;
            otpStatus.className = 'form-text ' + (ok ? 'text-success' : 'text-danger');
        };

        mobileInput.addEventListener('input', () => {
            mobileInput.value = mobileInput.value.replace(/\D/g, '').slice(0, 10);
            otpVerifiedInput.value = '0';
            otpVerifiedBadge.classList.add('hidden');
            setSendButtonState();
        });

        sendOtpBtn.addEventListener('click', async () => {
            if (!isValidIndianMobile(mobileInput.value.trim())) {
                setStatus('Enter a valid Indian mobile number.', false);
                return;
            }
            setStatus('Sending OTP...', true);
            otpVerifiedInput.value = '0';
            const response = await fetch("<?php echo e(route('register.otp.send')); ?>", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ mobile: mobileInput.value })
            });
            const data = await response.json();
            setStatus(data.message || 'Unable to send OTP.', response.ok);
            if (response.ok) {
                startResendTimer(30);
            }
        });

        verifyOtpBtn.addEventListener('click', async () => {
            if (!isValidIndianMobile(mobileInput.value.trim())) {
                setStatus('Enter a valid Indian mobile number.', false);
                return;
            }
            if (!/^\d{6}$/.test(otpInput.value.trim())) {
                setStatus('Enter a valid 6-digit OTP.', false);
                return;
            }
            setStatus('Verifying OTP...', true);
            const response = await fetch("<?php echo e(route('register.otp.verify')); ?>", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ mobile: mobileInput.value, otp: otpInput.value })
            });
            const data = await response.json();
            otpVerifiedInput.value = response.ok ? '1' : '0';
            setStatus(data.message || 'Unable to verify OTP.', response.ok);
            if (response.ok) {
                otpVerifiedBadge.classList.remove('d-none');
            } else {
                otpVerifiedBadge.classList.add('d-none');
            }
        });

        leadRegisterForm.addEventListener('submit', (event) => {
            if (!isValidIndianMobile(mobileInput.value.trim())) {
                event.preventDefault();
                setStatus('Enter a valid Indian mobile number.', false);
                mobileInput.focus();
                return;
            }
            if (otpVerifiedInput.value !== '1') {
                event.preventDefault();
                setStatus('Please verify OTP before submitting the form.', false);
                otpInput.focus();
            }
        });

        setSendButtonState();
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('website.layouts.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/kiyohr/v2_version/resources/views/auth/register.blade.php ENDPATH**/ ?>