@extends('layouts.app')

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

    <!-- ===== BLUE HEADER ===== -->
    <div class="register-header">

        <div class="brand-block">
            <img src="{{ asset('images/lux-logo.png') }}" class="lux-logo" alt="LUX">
            <img src="{{ asset('images/kutumb-logo.png') }}" class="kutumb-logo" alt="Kutumb">
        </div>

        <h1 class="header-title">Get Started now</h1>
        <p class="header-subtitle">
            Create an account or log in to explore about our app.
        </p>

    </div>

    <!-- ===== FORM CARD ===== -->
    <div class="register-card">

    <p class="form-info">
        Verify mobile number to begin your registration
    </p>

    <label class="form-label">Phone Number</label>
    <input
        type="tel"
        id="mobileInput"
        class="form-control custom-input"
        placeholder="Enter your phone number"
    >

    <!-- OTP INPUT (HIDDEN INITIALLY) -->
    <div id="otpSection" class="otp-section">
        <label class="form-label">Enter 6 digit OTP</label>

        <div class="otp-inputs">
            <input type="text" maxlength="1">
            <input type="text" maxlength="1">
            <input type="text" maxlength="1">
            <input type="text" maxlength="1">
            <input type="text" maxlength="1">
            <input type="text" maxlength="1">
        </div>

        <p class="otp-hint">Default OTP: <b>123456</b></p>
        <!-- OTP TIMER & RESEND -->
<div id="otpTimer" class="otp-timer"></div>

<div id="resendOtp" class="resend-otp">
    Didn’t receive the OTP?
    <span id="resendBtn">Resend OTP again</span>
</div>

<!-- Notification -->
<div id="otpNotification" class="otp-notification"></div>

    </div>

    <button class="otp-btn" id="sendOtpBtn">
        Send OTP
    </button>

</div>


</div>
@endsection