@extends('layouts.app')

@section('content')
<div class="register-page">

    <!-- HEADER -->
    <div class="register-header">
        <h2 class="header-title">Register Account</h2>
        <p class="header-subtitle">Verify your documents</p>
    </div>

    <!-- STEPPER -->
    @include('components.stepper', ['step' => 3])

    <!-- CARD -->
    <div class="document-card">

        <h4>Verify Document</h4>
        <p class="small-text">KYC verification</p>

       <!-- Aadhaar -->
<label>Aadhaar Number <span class="required">*</span></label>
<input type="text" id="aadhaarInput" class="form-control custom-input" maxlength="12">
<div class="error-text" id="aadhaarError"></div>
<button class="verify-btn" id="verifyAadhaarBtn">Verify Aadhaar</button>

<!-- PAN -->
<label class="mt-3">PAN Number (Business)</label>
<input type="text" id="panInput" class="form-control custom-input" maxlength="10">
<div class="error-text" id="panError"></div>
<button class="verify-btn" id="verifyPanBtn" disabled>Verify PAN</button>

<!-- STATUS -->
<p id="kycStatus" style="display:none;color:#2e7d32;font-weight:600;margin-top:12px">
    ✔ Aadhaar & PAN Verified
</p>

        <!-- GST -->
        <label class="mt-3">GST Number (Optional)</label>
        <input
            type="text"
            class="form-control custom-input"
            placeholder="Enter 15-digit GST number"
            maxlength="15"
        >

        <!-- ACTION BUTTONS -->
        <div class="action-row mt-4">
            <a href="/registration/shop" class="back-btn-outline">
                ← Back
            </a>

        <button type="button" class="otp-btn" id="finalRegisterBtn">
    Register Now →
</button>
        </div>

    </div>
</div>
<div class="otp-modal" id="otpModal">
    <div class="otp-box">
        <div class="otp-header">
            <h4>Enter OTP</h4>
            <span class="close-otp" id="closeOtp">×</span>
        </div>

        <p class="otp-hint">
            OTP has been sent to Aadhaar linked mobile
        </p>

        <input type="text" id="otpInput" maxlength="6"
               class="form-control custom-input"
               placeholder="Enter OTP">

        <button class="otp-btn mt-3" id="verifyOtpBtn">Verify</button>
    </div>
</div>

@endsection