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

    <meta charset="UTF-8">

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

    <title>Create Account | PG Finsev</title>


    <style>

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


        body {
            min-height: 100vh;

            font-family:
                Inter,
                Arial,
                Helvetica,
                sans-serif;

            background:
                radial-gradient(
                    circle at 90% 15%,
                    rgba(23, 105, 224, 0.08),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #f8fbff,
                    #eef5fd
                );

            color: #10213f;
        }


        a {
            text-decoration: none;

            color: inherit;
        }


        .page {
            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 30px 20px;
        }


        .register-wrapper {
            width: 100%;

            max-width: 1000px;

            min-height: 650px;

            display: grid;

            grid-template-columns: 1fr 1fr;

            background: white;

            border-radius: 24px;

            overflow: hidden;

            border: 1px solid #e5edf7;

            box-shadow:
                0 25px 70px
                rgba(25, 62, 105, 0.12);
        }


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

        .brand-side {
            position: relative;

            padding: 55px;

            color: white;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            overflow: hidden;

            background:
                linear-gradient(
                    145deg,
                    #092d61,
                    #1769e0 70%,
                    #3d91ff
                );
        }


        .brand-side::before {
            content: "";

            position: absolute;

            width: 340px;
            height: 340px;

            border:
                1px solid
                rgba(255,255,255,0.12);

            border-radius: 50%;

            right: -140px;

            top: -80px;
        }


        .brand-side::after {
            content: "";

            position: absolute;

            width: 280px;
            height: 280px;

            border:
                1px solid
                rgba(255,255,255,0.10);

            border-radius: 50%;

            left: -150px;

            bottom: -100px;
        }


        .brand-content {
            position: relative;

            z-index: 2;
        }


        .logo {
            display: inline-flex;

            align-items: center;

            background: white;

            padding: 9px 14px;

            border-radius: 10px;

            margin-bottom: 55px;
        }


        .logo img {
            height: 38px;

            width: auto;

            max-width: 175px;

            display: block;
        }


        .brand-content h1 {
            font-size: 40px;

            line-height: 1.1;

            letter-spacing: -1.5px;

            margin-bottom: 20px;
        }


        .brand-content p {
            color: #d9e8fa;

            font-size: 15px;

            max-width: 390px;

            line-height: 1.7;
        }


        /* BENEFITS */

        .benefits {
            position: relative;

            z-index: 2;

            display: flex;

            flex-direction: column;

            gap: 14px;
        }


        .benefit {
            display: flex;

            align-items: center;

            gap: 11px;

            color: #e5effc;

            font-size: 13px;
        }


        .benefit-icon {
            width: 30px;
            height: 30px;

            display: flex;

            align-items: center;

            justify-content: center;

            background:
                rgba(255,255,255,0.12);

            border-radius: 8px;

            font-size: 13px;
        }


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

        .form-side {
            padding: 48px 55px;

            display: flex;

            align-items: center;
        }


        .form-container {
            width: 100%;

            max-width: 390px;

            margin: auto;
        }


        .mobile-logo {
            display: none;

            justify-content: center;

            margin-bottom: 30px;
        }


        .mobile-logo img {
            height: 42px;

            max-width: 180px;
        }


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


        .form-header h2 {
            font-size: 30px;

            letter-spacing: -1px;

            margin-bottom: 7px;
        }


        .form-header p {
            color: #7a899e;

            font-size: 14px;
        }


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

        .error-box {
            padding: 12px 14px;

            background: #fff3f3;

            border: 1px solid #f1d0d0;

            color: #b63b3b;

            border-radius: 9px;

            font-size: 12px;

            margin-bottom: 20px;
        }


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


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

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


        .form-label {
            display: block;

            color: #243958;

            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: #91a0b3;

            font-size: 15px;

            pointer-events: none;
        }


        .form-input {
            width: 100%;

            height: 47px;

            border:
                1px solid
                #dce5f0;

            border-radius: 10px;

            background: #fbfdff;

            padding:
                0 14px 0 42px;

            color: #1b2e4c;

            font-size: 14px;

            outline: none;

            transition: 0.2s ease;
        }


        .form-input:focus {
            background: white;

            border-color: #1769e0;

            box-shadow:
                0 0 0 3px
                rgba(23,105,224,0.08);
        }


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


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


        .error {
            color: #d44747;

            font-size: 11px;

            margin-top: 5px;
        }


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

        .mobile-prefix {
            position: absolute;

            left: 42px;

            top: 50%;

            transform: translateY(-50%);

            color: #7f8ea3;

            font-size: 13px;

            font-weight: 600;

            pointer-events: none;
        }


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


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

        .password-note {
            color: #8a98aa;

            font-size: 10px;

            margin-top: 6px;
        }


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

        .register-button {
            width: 100%;

            height: 49px;

            border: none;

            border-radius: 10px;

            background:
                linear-gradient(
                    135deg,
                    #1769e0,
                    #0d5dcf
                );

            color: white;

            font-size: 14px;

            font-weight: 700;

            cursor: pointer;

            box-shadow:
                0 10px 22px
                rgba(23,105,224,0.20);

            transition: 0.2s ease;

            margin-top: 5px;
        }


        .register-button:hover {
            transform: translateY(-1px);

            box-shadow:
                0 13px 28px
                rgba(23,105,224,0.25);
        }


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

        .login-text {
            text-align: center;

            color: #7d8ba0;

            font-size: 13px;

            margin-top: 23px;
        }


        .login-text a {
            color: #1769e0;

            font-weight: 700;
        }


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


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

        .back-home {
            display: block;

            text-align: center;

            margin-top: 20px;

            color: #8795a8;

            font-size: 12px;
        }


        .back-home:hover {
            color: #1769e0;
        }


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

        @media (max-width: 800px) {

            .page {
                padding: 20px 15px;
            }


            .register-wrapper {
                max-width: 500px;

                min-height: auto;

                grid-template-columns: 1fr;

                border-radius: 20px;
            }


            .brand-side {
                display: none;
            }


            .form-side {
                padding: 38px 25px;
            }


            .mobile-logo {
                display: flex;
            }


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

        }


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

        @media (max-width: 450px) {

            .page {
                padding: 0;
            }


            .register-wrapper {
                min-height: 100vh;

                border: none;

                border-radius: 0;

                box-shadow: none;
            }


            .form-side {
                padding: 30px 22px;
            }


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

        }

    </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="PG Finsev"
                    >

                </a>


                <h1>
                    Start your journey.
                </h1>


                <p>

                    Create your PG Finsev account
                    and begin your simple 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>


        </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="PG Finsev"
                        >

                    </a>

                </div>


                <!-- HEADER -->

                <div class="form-header">

                    <h2>
                        Create Account
                    </h2>

                    <p>
                        Enter your details to create your PG Finsev 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 PG Finsev
                </a>


            </div>

        </div>


    </div>

</div>


</body>
</html>