<?php
    use App\Models\Setting;

    $name = Setting::getValue('business.name', config('app.name', 'ISP Billing'));
    $tagline = Setting::getValue('business.tagline', 'Smart ISP Management');
    $logoPath = Setting::getValue('business.logo');
    $logo = $logoPath ? asset('storage/' . $logoPath) : asset('assets/images/bsd/logo.png');
?>
<!doctype html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Login - <?php echo e($name); ?></title>
    <link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap.min.css')); ?>">
    <style>
        * {
            box-sizing: border-box
        }

        body {
            min-height: 100vh;
            margin: 0;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
            background: #eff6ff;
            color: #0f172a
        }

        .login-shell {
            min-height: 100vh;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr)
        }

        .login-story {
            padding: clamp(2rem, 6vw, 6rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: radial-gradient(circle at 20% 10%, rgba(56, 189, 248, .45), transparent 35%), linear-gradient(145deg, #0f172a, #1d4ed8);
            color: #fff
        }

        .story-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.2rem;
            font-weight: 800
        }

        .story-brand img {
            width: 54px;
            height: 54px;
            object-fit: contain;
            background: #fff;
            border-radius: 16px;
            padding: 7px
        }

        .story-copy h1 {
            font-size: clamp(2.5rem, 5vw, 5rem);
            line-height: 1.02;
            letter-spacing: -.05em;
            max-width: 720px
        }

        .story-copy p {
            color: #cbd5e1;
            font-size: 1.15rem
        }

        .login-side {
            display: grid;
            place-items: center;
            padding: 2rem
        }

        .login-card {
            width: min(100%, 460px);
            background: #fff;
            padding: clamp(1.5rem, 4vw, 3rem);
            border: 1px solid rgba(226, 232, 240, .9);
            border-radius: 1.6rem;
            box-shadow: 0 2rem 6rem rgba(15, 23, 42, .12)
        }

        .login-heading {
            font-size: 1.85rem;
            letter-spacing: -.025em
        }

        .field-group {
            margin-bottom: 1.15rem
        }

        .field-label {
            display: block;
            margin-bottom: .5rem;
            color: #334155;
            font-size: .9rem;
            font-weight: 700
        }

        .field-shell {
            position: relative;
            width: 100%
        }

        .field-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
            z-index: 2
        }

        .login-input {
            display: block;
            width: 100%;
            height: 56px;
            margin: 0;
            padding: 0 48px;
            border: 1.5px solid #dbe4ef;
            border-radius: 14px;
            background: #f8fafc;
            color: #0f172a;
            font-size: 1rem;
            line-height: 56px;
            outline: 0;
            transition: border-color .18s, box-shadow .18s, background .18s
        }

        .login-input::placeholder {
            color: #94a3b8
        }

        .login-input:hover {
            border-color: #b9c7d8
        }

        .login-input:focus {
            border-color: #4f46e5;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(79, 70, 229, .12)
        }

        .field-shell:focus-within .field-icon {
            color: #4f46e5
        }

        .login-input.is-invalid {
            border-color: #dc3545;
            background-image: none
        }

        .login-input.is-invalid:focus {
            box-shadow: 0 0 0 4px rgba(220, 53, 69, .11)
        }

        .field-error {
            display: block;
            margin-top: .4rem;
            color: #dc3545;
            font-size: .8rem
        }

        .password-toggle {
            position: absolute;
            right: 9px;
            top: 50%;
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            padding: 0;
            transform: translateY(-50%);
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #64748b;
            z-index: 3
        }

        .password-toggle:hover,
        .password-toggle:focus-visible {
            background: #e9eef7;
            color: #3730a3;
            outline: 0
        }

        .password-toggle svg {
            width: 19px;
            height: 19px
        }

        .remember-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin: 1.35rem 0
        }

        .remember-row .form-check {
            display: flex;
            align-items: center;
            gap: .45rem;
            margin: 0
        }

        .remember-row .form-check-input {
            width: 1.05rem;
            height: 1.05rem;
            margin: 0
        }

        .forgot-link {
            font-size: .88rem;
            font-weight: 650;
            text-decoration: none
        }

        .btn-login {
            min-height: 54px;
            width: 100%;
            border: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, #4f46e5, #2563eb);
            font-weight: 750;
            box-shadow: 0 10px 24px rgb(228, 230, 233);
            color: #fff;
            transition: background .18s, box-shadow .18s
        }

        .btn-login:hover {
            background: linear-gradient(135deg, #4338ca, #1d4ed8)
        }

        @media(max-width:850px) {
            .login-shell {
                grid-template-columns: 1fr
            }

            .login-story {
                min-height: 230px;
                padding: 1.6rem 1.25rem 3.5rem
            }

            .story-copy h1 {
                font-size: 2.15rem
            }

            .story-copy p {
                font-size: 1rem
            }

            .login-side {
                margin-top: -38px;
                padding: 0 1rem 1.5rem;
                position: relative
            }

            .story-foot {
                display: none
            }

            .login-card {
                border-radius: 1.35rem
            }
        }

        @media(max-width:420px) {
            .login-card {
                padding: 1.35rem 1.1rem
            }

            .login-input {
                height: 52px;
                line-height: 52px
            }

            .remember-row {
                align-items: flex-start;
                flex-direction: column;
                gap: .7rem
            }
        }
    </style>
</head>

<body>
    <main class="login-shell">
        <section class="login-story">
            <a class="story-brand text-white text-decoration-none" href="<?php echo e(url('/')); ?>">
                <img src="<?php echo e($logo); ?>" alt="<?php echo e($name); ?>">
                <span><?php echo e($name); ?></span>
            </a>
            <div class="story-copy">
                <p class="text-uppercase fw-bold small">Secure admin portal</p>
                <h1>Your ISP in one smart dashboard.</h1>
                <p><?php echo e($tagline); ?></p>
            </div>
            <small class="story-foot">Secure • Fast • Responsive</small>
        </section>

        <section class="login-side">
            <div class="login-card">
                <div class="mb-4">
                    <h2 class="login-heading fw-bold mb-2">Welcome back</h2>
                    <p class="text-secondary mb-0">Sign in to your account.</p>
                </div>

                <form method="POST" action="<?php echo e(route('login')); ?>">
                    <?php echo csrf_field(); ?>
                    <div class="field-group">
                        <label class="field-label" for="email">Email address</label>
                        <div class="field-shell">
                            <svg class="field-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" aria-hidden="true">
                                <path d="M4 4h16v16H4z" />
                                <path d="m4 6 8 6 8-6" />
                            </svg>
                            <input class="login-input <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="email"
                                name="email" type="email" value="<?php echo e(old('email')); ?>"
                                placeholder="name@example.com" required autofocus autocomplete="username"
                                aria-describedby="emailError">
                        </div>
                        <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="field-error" id="emailError"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="password">Password</label>
                        <div class="field-shell">
                            <svg class="field-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" aria-hidden="true">
                                <rect x="5" y="10" width="14" height="10" rx="2" />
                                <path d="M8 10V7a4 4 0 0 1 8 0v3" />
                            </svg>
                            <input class="login-input <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="password"
                                name="password" type="password" placeholder="Enter your password" required
                                autocomplete="current-password" aria-describedby="passwordError">
                            <button type="button" class="password-toggle" id="togglePassword"
                                aria-label="Show password" aria-pressed="false">
                                <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" aria-hidden="true">
                                    <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z" />
                                    <circle cx="12" cy="12" r="2.5" />
                                </svg>
                            </button>
                        </div>
                        <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="field-error" id="passwordError"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                    </div>

                    <div class="remember-row">
                        <label class="form-check" for="remember">
                            <input class="form-check-input" id="remember" type="checkbox" name="remember">
                            <span class="form-check-label">Remember me</span>
                        </label>
                        <?php if(Route::has('password.request')): ?>
                            <a class="forgot-link" href="<?php echo e(route('password.request')); ?>">Forgot password?</a>
                        <?php endif; ?>
                    </div>

                    <button class="btn btn-primary btn-login w-100 " type="submit">Login</button>
                </form>
            </div>
        </section>
    </main>
    <script>
        document.getElementById('togglePassword').addEventListener('click', function() {
            const password = document.getElementById('password');
            const showing = password.type === 'text';
            password.type = showing ? 'password' : 'text';
            this.setAttribute('aria-label', showing ? 'Show password' : 'Hide password');
            this.setAttribute('aria-pressed', showing ? 'false' : 'true');
        });
    </script>
</body>

</html>
<?php /**PATH D:\herd\billing\laravel-app\resources\views\auth\login.blade.php ENDPATH**/ ?>