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

<head>
    @include('layout.header')

    <style>
        body {
            background: linear-gradient(135deg, #4f46e5, #3b82f6);
            min-height: 100vh;
        }

        .auth-page .card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .auth-side-wrapper {
            background: url('/your-image.jpg') center/cover no-repeat;
            height: 100%;
            min-height: 350px;
        }

        .auth-form-wrapper {
            padding: 40px !important;
        }

        .noble-ui-logo {
            font-size: 32px;
            font-weight: 700;
            color: #4f46e5;
        }

        .noble-ui-logo span {
            color: #3b82f6;
        }

        .form-control {
            border-radius: 10px;
            padding: 10px 14px;
        }

        .btn-primary {
            border-radius: 10px;
            padding: 10px 20px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="main-wrapper">
        <div class="page-wrapper full-page">
            <div class="page-content d-flex align-items-center justify-content-center">

                <div class="row w-100 mx-0 auth-page">
                    <div class="col-md-8 col-xl-6 mx-auto">
                        <div class="card">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="auth-form-wrapper px-4 py-5 text-center">

                                        <a href="#" class="noble-ui-logo d-block mb-2 fs-3 fw-bold">
                                            RIU<span class="text-primary">NG</span>
                                        </a>

                                        <h5 class="text-muted fw-normal mb-4">
                                            Welcome back! Log in to your account.
                                        </h5>

                                        <form action="{{ route('post_login') }}" method="POST"
                                            class="forms-sample text-start mx-auto" style="max-width: 350px;">
                                            @csrf

                                            <div class="mb-3">
                                                <label class="form-label">Username</label>
                                                <input type="text" name="username" class="form-control"
                                                    placeholder="Enter your username">
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label">Password</label>
                                                <input type="password" name="password" class="form-control"
                                                    placeholder="Enter your password">
                                            </div>

                                            <div class="form-check mb-3">
                                                <input type="checkbox" class="form-check-input" id="authCheck">
                                                <label class="form-check-label" for="authCheck">
                                                    Remember me
                                                </label>
                                            </div>

                                            <button type="submit" class="btn btn-primary w-100 py-2">
                                                Login
                                            </button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    @include('layout.script')

</body>

</html>
