@extends('website.layouts.main')

@section('meta_title', 'Start Free Trial - ' . config('app.name'))
@section('meta_description', 'Register your company for a free HRMS trial with OTP-verified mobile onboarding.')

@section('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="{{ 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>

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    <form method="post" action="{{ route('register.store') }}" id="leadRegisterForm" class="row g-3">
                        @csrf
                        <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="{{ old('company_name') }}" required class="form-control">
                            @error('company_name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </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="{{ old('contact_person_name') }}" required class="form-control">
                            @error('contact_person_name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </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="{{ old('employee_count') }}" required class="form-control">
                            @error('employee_count')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label for="email" class="form-label">Work email (optional)</label>
                            <input id="email" name="email" type="email" value="{{ old('email') }}" class="form-control">
                            @error('email')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </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="{{ 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>
                            @error('mobile')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </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">{{ old('notes') }}</textarea>
                            @error('notes')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </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>
@endsection

@push('scripts')
    <script>
        const csrfToken = '{{ 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("{{ 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("{{ 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>
@endpush