<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login | 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 10% 20%,
                    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;
        }

        .login-wrapper {
            width: 100%;
            max-width: 1000px;

            min-height: 610px;

            display: grid;
            grid-template-columns: 1fr 1fr;

            background: white;

            border-radius: 24px;

            overflow: hidden;

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

            border: 1px solid #e5edf7;
        }

        /* ==================================
           LEFT SIDE
        ================================== */

        .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: 330px;
            height: 330px;

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

            border-radius: 50%;

            right: -130px;
            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: 170px;

            display: block;
        }

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

            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 {
            position: relative;

            z-index: 2;

            display: flex;
            flex-direction: column;

            gap: 13px;
        }

        .benefit {
            display: flex;
            align-items: center;

            gap: 11px;

            color: #e5effc;

            font-size: 13px;
        }

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

            display: flex;
            align-items: center;
            justify-content: center;

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

            border-radius: 8px;

            font-size: 13px;
        }

        /* ==================================
           RIGHT SIDE
        ================================== */

        .form-side {
            padding: 55px;

            display: flex;
            align-items: center;
        }

        .form-container {
            width: 100%;
            max-width: 390px;

            margin: auto;
        }

        .mobile-logo {
            display: none;
        }

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

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

            letter-spacing: -1px;

            margin-bottom: 8px;
        }

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

            font-size: 14px;
        }

        /* ==================================
           SESSION STATUS
        ================================== */

        .status-message {
            padding: 12px 14px;

            background: #effaf3;

            border: 1px solid #cdebd7;

            color: #277844;

            border-radius: 9px;

            font-size: 13px;

            margin-bottom: 18px;
        }

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

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

            background: #fff3f3;

            border: 1px solid #f1d0d0;

            color: #b63b3b;

            border-radius: 9px;

            font-size: 13px;

            margin-bottom: 18px;
        }

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

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

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

        .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: 48px;

            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;
        }

        /* ==================================
           OPTIONS
        ================================== */

        .form-options {
            display: flex;

            align-items: center;

            justify-content: space-between;

            margin: 3px 0 25px;
        }

        .remember {
            display: flex;

            align-items: center;

            gap: 7px;

            color: #718097;

            font-size: 12px;
        }

        .remember input {
            width: 14px;
            height: 14px;

            accent-color: #1769e0;
        }

        .forgot {
            color: #1769e0;

            font-size: 12px;

            font-weight: 600;
        }

        .forgot:hover {
            text-decoration: underline;
        }

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

        .login-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;
        }

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

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

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

        .register-text {
            text-align: center;

            color: #7d8ba0;

            font-size: 13px;

            margin-top: 25px;
        }

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

            font-weight: 700;
        }

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

        .back-home {
            display: block;

            text-align: center;

            margin-top: 22px;

            color: #8795a8;

            font-size: 12px;
        }

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

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

        @media (max-width: 800px) {

            .page {
                padding: 20px 15px;
            }

            .login-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;

                justify-content: center;

                margin-bottom: 35px;
            }

            .mobile-logo img {
                height: 42px;

                max-width: 180px;
            }

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

        @media (max-width: 450px) {

            .page {
                padding: 0;
            }

            .login-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="login-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>
                    Welcome back.
                </h1>


                <p>

                    Login to your PG Finsev account
                    and continue your application
                    journey.

                </p>


            </div>


            <div class="benefits">


                <div class="benefit">

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

                    Simple digital application

                </div>


                <div class="benefit">

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

                    Secure account access

                </div>


                <div class="benefit">

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

                    Access your card application

                </div>


            </div>


        </div>



        <!-- =================================
             LOGIN 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>
                        Sign in
                    </h2>

                    <p>
                        Enter your account details to continue.
                    </p>

                </div>


                <!-- SESSION STATUS -->

                @if (session('status'))

                    <div class="status-message">

                        {{ session('status') }}

                    </div>

                @endif


                <!-- VALIDATION ERRORS -->

                @if ($errors->any())

                    <div class="error-box">

                        <ul>

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

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

                            @endforeach

                        </ul>

                    </div>

                @endif


                <!-- LOGIN FORM -->

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

                    @csrf


                    <!-- 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"
                                class="form-input"
                                value="{{ old('email') }}"
                                placeholder="Enter your email"
                                required
                                autofocus
                                autocomplete="username"
                            >

                        </div>

                    </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"
                                placeholder="Enter your password"
                                required
                                autocomplete="current-password"
                            >

                        </div>

                    </div>


                    <!-- OPTIONS -->

                    <div class="form-options">


                        <label class="remember">

                            <input
                                type="checkbox"
                                name="remember"
                            >

                            Remember me

                        </label>


                        @if (Route::has('password.request'))

                            <a
                                href="{{ route('password.request') }}"
                                class="forgot"
                            >
                                Forgot password?
                            </a>

                        @endif


                    </div>


                    <!-- LOGIN -->

                    <button
                        type="submit"
                        class="login-button"
                    >

                        Sign In

                    </button>


                </form>


                <!-- REGISTER -->

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

                    <div class="register-text">

                        Don't have an account?

                        <a href="{{ route('register') }}">
                            Create Account
                        </a>

                    </div>

                @endif


                <!-- HOME -->

                <a
                    href="/"
                    class="back-home"
                >
                    ← Back to PG Finsev
                </a>


            </div>

        </div>


    </div>

</div>

</body>
</html>