<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Create Account | EMI CREDITS</title>

    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --black: #050505;
            --black-soft: #0b0b0b;
            --black-card: #101010;
            --yellow: #ffd21c;
            --yellow-dark: #e9b900;
            --white: #ffffff;
            --text-soft: #a7a7a7;
            --border: rgba(255, 210, 28, 0.20);
        }

        body {
            min-height: 100vh;
            font-family: Inter, Arial, Helvetica, sans-serif;
            background:
                radial-gradient(
                    circle at 90% 15%,
                    rgba(255, 210, 28, 0.10),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 8% 85%,
                    rgba(255, 210, 28, 0.06),
                    transparent 28%
                ),
                #050505;
            color: #ffffff;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .18;
            background-image:
                linear-gradient(rgba(255,210,28,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,210,28,.035) 1px, transparent 1px);
            background-size: 42px 42px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 35px 20px;
            position: relative;
            z-index: 1;
        }

        .register-wrapper {
            width: 100%;
            max-width: 1080px;
            min-height: 650px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: #0a0a0a;
            border-radius: 26px;
            overflow: hidden;
            border: 1px solid rgba(255,210,28,.22);
            box-shadow:
                0 30px 90px rgba(0,0,0,.60),
                0 0 50px rgba(255,210,28,.04);
        }

        /* =========================================
           LEFT BRAND
        ========================================= */

        .brand-side {
            position: relative;
            padding: 55px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 80% 18%,
                    rgba(255,210,28,.15),
                    transparent 27%
                ),
                linear-gradient(145deg, #050505, #111111);
            border-right: 1px solid rgba(255,210,28,.12);
        }

        .brand-side::before {
            content: "";
            position: absolute;
            width: 410px;
            height: 410px;
            border: 1px solid rgba(255,210,28,.12);
            border-radius: 50%;
            right: -190px;
            top: -150px;
        }

        .brand-side::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid rgba(255,210,28,.08);
            border-radius: 50%;
            left: -170px;
            bottom: -140px;
        }

        .brand-content,
        .benefits {
            position: relative;
            z-index: 2;
        }

        /* Logo only — no white box */
        .logo {
            display: inline-flex;
            align-items: center;
            padding: 0;
            margin-bottom: 58px;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        .logo img {
            height: 40px;
            width: auto;
            max-width: 180px;
            display: block;
        }

        .eyebrow {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            align-self: flex-start;
            width: fit-content;
            gap: 7px;
            color: var(--yellow);
            border: 1px solid rgba(255,210,28,.28);
            background: rgba(255,210,28,.05);
            padding: 8px 13px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .7px;
            text-transform: uppercase;
            margin: 0 0 20px 0;
            text-align: left;
        }

        .brand-content h1 {
            font-size: 42px;
            line-height: 1.08;
            letter-spacing: -1.7px;
            margin-bottom: 20px;
        }

        .brand-content h1 span {
            color: var(--yellow);
        }

        .brand-content p {
            color: #a7a7a7;
            font-size: 15px;
            max-width: 410px;
            line-height: 1.75;
        }

        /* BENEFITS */

        .benefits {
            display: flex;
            flex-direction: column;
            gap: 13px;
        }

        .benefit {
            display: flex;
            align-items: center;
            gap: 11px;
            color: #d7d7d7;
            font-size: 13px;
        }

        .benefit-icon {
            width: 31px;
            height: 31px;
            flex: 0 0 31px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,210,28,.10);
            border: 1px solid rgba(255,210,28,.22);
            color: var(--yellow);
            border-radius: 9px;
            font-size: 13px;
        }

        /* =========================================
           RIGHT FORM
        ========================================= */

        .form-side {
            padding: 48px 55px;
            display: flex;
            align-items: center;
            background:
                radial-gradient(
                    circle at 90% 5%,
                    rgba(255,210,28,.07),
                    transparent 30%
                ),
                #0b0b0b;
        }

        .form-container {
            width: 100%;
            max-width: 400px;
            margin: auto;
        }

        .mobile-logo {
            display: none;
            justify-content: center;
            margin-bottom: 30px;
        }

        .mobile-logo a {
            display: inline-flex;
            padding: 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        .mobile-logo img {
            height: 42px;
            max-width: 185px;
            display: block;
        }

        .form-header {
            margin-bottom: 27px;
        }

        .form-header h2 {
            font-size: 30px;
            letter-spacing: -1px;
            margin-bottom: 8px;
            color: #ffffff;
        }

        .form-header h2 span {
            color: var(--yellow);
        }

        .form-header p {
            color: #888888;
            font-size: 14px;
            line-height: 1.6;
        }

        /* =========================================
           ERROR
        ========================================= */

        .error-box {
            padding: 12px 14px;
            background: rgba(255,70,70,.07);
            border: 1px solid rgba(255,100,100,.22);
            color: #ff9b9b;
            border-radius: 10px;
            font-size: 12px;
            margin-bottom: 20px;
        }

        .error-box ul {
            padding-left: 18px;
        }

        /* =========================================
           FORM
        ========================================= */

        .form-group {
            margin-bottom: 18px;
        }

        .form-label {
            display: block;
            color: #e7e7e7;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #777777;
            font-size: 15px;
            pointer-events: none;
            z-index: 2;
        }

        .form-input {
            width: 100%;
            height: 48px;
            border: 1px solid #292929;
            border-radius: 11px;
            background: #111111;
            padding: 0 14px 0 42px;
            color: #ffffff;
            font-size: 14px;
            outline: none;
            transition: .2s ease;
        }

        .form-input:hover {
            border-color: #3a3a3a;
        }

        .form-input:focus {
            background: #0e0e0e;
            border-color: var(--yellow);
            box-shadow: 0 0 0 3px rgba(255,210,28,.08);
        }

        .form-input::placeholder {
            color: #666666;
        }

        .input-error {
            border-color: #e05b5b;
        }

        .error {
            color: #ff9999;
            font-size: 11px;
            margin-top: 5px;
        }

        /* =========================================
           MOBILE INPUT
        ========================================= */

        .mobile-prefix {
            position: absolute;
            left: 42px;
            top: 50%;
            transform: translateY(-50%);
            color: #888888;
            font-size: 13px;
            font-weight: 600;
            pointer-events: none;
        }

        .mobile-input {
            padding-left: 84px;
        }

        /* =========================================
           PASSWORD NOTE
        ========================================= */

        .password-note {
            color: #777777;
            font-size: 10px;
            margin-top: 6px;
        }

        /* =========================================
           REGISTER BUTTON
        ========================================= */

        .register-button {
            width: 100%;
            height: 51px;
            border: none;
            border-radius: 11px;
            background:
                linear-gradient(
                    135deg,
                    #ffd21c,
                    #f0b900
                );
            color: #080808;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 12px 28px rgba(255,210,28,.15);
            transition: .2s ease;
            margin-top: 5px;
        }

        .register-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 15px 32px rgba(255,210,28,.22);
        }

        .register-button:active {
            transform: translateY(0);
        }

        /* =========================================
           LOGIN
        ========================================= */

        .login-text {
            text-align: center;
            color: #777777;
            font-size: 13px;
            margin-top: 23px;
        }

        .login-text a {
            color: var(--yellow);
            font-weight: 800;
        }

        .login-text a:hover {
            text-decoration: underline;
        }

        /* =========================================
           HOME
        ========================================= */

        .back-home {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #707070;
            font-size: 12px;
        }

        .back-home:hover {
            color: var(--yellow);
        }

        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 800px) {

            .page {
                padding: 18px 14px;
            }

            .register-wrapper {
                max-width: 520px;
                min-height: auto;
                grid-template-columns: 1fr;
                border-radius: 22px;
            }

            .brand-side {
                display: none;
            }

            .form-side {
                padding: 38px 26px;
                min-height: calc(100vh - 36px);
            }

            .mobile-logo {
                display: flex;
            }

            .form-header {
                text-align: center;
            }
        }

        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 450px) {

            body {
                background: #050505;
            }

            body::before {
                display: none;
            }

            .page {
                padding: 0;
            }

            .register-wrapper {
                min-height: 100vh;
                border: none;
                border-radius: 0;
                box-shadow: none;
            }

            .form-side {
                min-height: 100vh;
                padding: 30px 22px;
            }

            .mobile-logo {
                margin-bottom: 30px;
            }

            .form-header h2 {
                font-size: 28px;
            }

            .form-header p {
                font-size: 13px;
            }

            .register-button {
                height: 52px;
            }
        }

    </style>

</head>

<body>

<div class="page">

    <div class="register-wrapper">

        <!-- =====================================
             LEFT BRAND PANEL
        ====================================== -->

        <div class="brand-side">

            <div class="brand-content">

                <a href="/" class="logo">

                    <img
                        src="{{ asset('images/logo.png') }}"
                        alt="EMI CREDITS"
                    >

                </a>

                <div class="eyebrow">
                    ✦ Smart EMI Solutions
                </div>

                <h1>
                    Start your <span>journey.</span>
                </h1>

                <p>
                    Create your EMI CREDITS account
                    and begin your simple, secure and
                    flexible digital EMI card application.
                </p>

            </div>

            <div class="benefits">

                <div class="benefit">

                    <div class="benefit-icon">
                        ✓
                    </div>

                    Quick online registration

                </div>

                <div class="benefit">

                    <div class="benefit-icon">
                        🔒
                    </div>

                    Secure application process

                </div>

                <div class="benefit">

                    <div class="benefit-icon">
                        💳
                    </div>

                    Complete your EMI card application

                </div>

                <div class="benefit">

                    <div class="benefit-icon">
                        ₹
                    </div>

                    Flexible EMI solutions

                </div>

            </div>

        </div>

        <!-- =====================================
             REGISTER FORM
        ====================================== -->

        <div class="form-side">

            <div class="form-container">

                <!-- MOBILE LOGO -->

                <div class="mobile-logo">

                    <a href="/">

                        <img
                            src="{{ asset('images/logo.png') }}"
                            alt="EMI CREDITS"
                        >

                    </a>

                </div>

                <!-- HEADER -->

                <div class="form-header">

                    <h2>
                        Create <span>Account</span>
                    </h2>

                    <p>
                        Enter your details to create your
                        EMI CREDITS account.
                    </p>

                </div>

                <!-- VALIDATION ERRORS -->

                @if ($errors->any())

                    <div class="error-box">

                        <ul>

                            @foreach ($errors->all() as $error)

                                <li>
                                    {{ $error }}
                                </li>

                            @endforeach

                        </ul>

                    </div>

                @endif

                <!-- REGISTER FORM -->

                <form
                    method="POST"
                    action="{{ route('register') }}"
                >

                    @csrf

                    <!-- FULL NAME -->

                    <div class="form-group">

                        <label
                            for="name"
                            class="form-label"
                        >
                            Full Name
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                👤
                            </span>

                            <input
                                id="name"
                                type="text"
                                name="name"
                                value="{{ old('name') }}"
                                class="form-input @error('name') input-error @enderror"
                                placeholder="Enter your full name"
                                required
                                autofocus
                                autocomplete="name"
                            >

                        </div>

                        @error('name')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>

                    <!-- EMAIL -->

                    <div class="form-group">

                        <label
                            for="email"
                            class="form-label"
                        >
                            Email Address
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                ✉
                            </span>

                            <input
                                id="email"
                                type="email"
                                name="email"
                                value="{{ old('email') }}"
                                class="form-input @error('email') input-error @enderror"
                                placeholder="Enter your email"
                                required
                                autocomplete="username"
                            >

                        </div>

                        @error('email')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>

                    <!-- MOBILE NUMBER -->

                    <div class="form-group">

                        <label
                            for="mobile"
                            class="form-label"
                        >
                            Mobile Number
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                📱
                            </span>

                            <span class="mobile-prefix">
                                +91
                            </span>

                            <input
                                id="mobile"
                                type="tel"
                                name="mobile"
                                value="{{ old('mobile') }}"
                                class="form-input mobile-input @error('mobile') input-error @enderror"
                                placeholder="Enter 10-digit mobile number"
                                maxlength="10"
                                minlength="10"
                                inputmode="numeric"
                                autocomplete="tel"
                                oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10)"
                                required
                            >

                        </div>

                        @error('mobile')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>

                    <!-- PASSWORD -->

                    <div class="form-group">

                        <label
                            for="password"
                            class="form-label"
                        >
                            Password
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                🔒
                            </span>

                            <input
                                id="password"
                                type="password"
                                name="password"
                                class="form-input @error('password') input-error @enderror"
                                placeholder="Create a password"
                                required
                                autocomplete="new-password"
                            >

                        </div>

                        <div class="password-note">
                            Use at least 8 characters.
                        </div>

                        @error('password')

                            <div class="error">
                                {{ $message }}
                            </div>

                        @enderror

                    </div>

                    <!-- CONFIRM PASSWORD -->

                    <div class="form-group">

                        <label
                            for="password_confirmation"
                            class="form-label"
                        >
                            Confirm Password
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                🔐
                            </span>

                            <input
                                id="password_confirmation"
                                type="password"
                                name="password_confirmation"
                                class="form-input"
                                placeholder="Confirm your password"
                                required
                                autocomplete="new-password"
                            >

                        </div>

                    </div>

                    <!-- SUBMIT -->

                    <button
                        type="submit"
                        class="register-button"
                    >
                        Create Account →
                    </button>

                </form>

                <!-- LOGIN -->

                @if (Route::has('login'))

                    <div class="login-text">

                        Already have an account?

                        <a href="{{ route('login') }}">
                            Sign In
                        </a>

                    </div>

                @endif

                <!-- HOME -->

                <a
                    href="/"
                    class="back-home"
                >
                    ← Back to EMI CREDITS
                </a>

            </div>

        </div>

    </div>

</div>

</body>
</html>
