@extends('layouts.app')

@push('head')
@verbatim
<style>
    /* ---------------------------------------------------------------------
       Auth pages — modern, on-brand sign-in card.
       Centres a single narrow card; all colour via MuveOne design tokens
       (no raw hex, no off-brand Materialize teal). Scoped to .auth-shell so
       nothing here leaks into the rest of the app.
    --------------------------------------------------------------------- */
    .auth-shell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--mo-gap-lg);
        min-height: calc(100vh - 210px);
        padding: 40px 16px 56px;
    }

    /* Brand mark above the card */
    .auth-shell .auth-brand { text-align: center; }
    .auth-shell .auth-brand img { height: 44px; width: auto; display: inline-block; }

    /* The card itself — one cohesive surface, no floating header block */
    .auth-shell .auth-card {
        width: 100%;
        max-width: 420px;
        margin: 0;
        background: var(--mo-bg);
        border: 1px solid var(--mo-line);
        border-radius: var(--mo-radius-lg);
        box-shadow: var(--mo-shadow-xl);
        overflow: hidden;
    }
    /* Thin brand accent bar at the very top of the card */
    .auth-shell .auth-card::before {
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(90deg, var(--mo-primary) 0%, var(--mo-interactive) 60%, var(--mo-accent) 100%);
    }

    .auth-shell .auth-body { padding: 28px 28px 32px; }

    .auth-shell .auth-head { margin-bottom: 24px; }
    .auth-shell .auth-head h1 {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--mo-ink);
        margin: 0 0 6px;
    }
    .auth-shell .auth-head p {
        font-size: .9375rem;
        color: var(--mo-muted-strong);
        margin: 0;
    }

    /* Inputs: fix Materialize's teal focus colour → brand blue, add room for
       the leading icon, and give a filled resting state so fields read as
       tappable targets rather than bare underlines. The top padding reserves
       space so the floated label lifts into the card, not onto its neighbour. */
    .auth-shell .input-field { position: relative; margin: 0; padding-top: 22px; }
    .auth-shell .input-field > input[type="email"],
    .auth-shell .input-field > input[type="password"],
    .auth-shell .input-field > input[type="text"] {
        box-sizing: border-box;
        width: 100%;        /* override Materialize .prefix ~ input calc(100% - 3rem) + margin */
        height: 48px;
        margin: 0;
        padding: 0 44px 0 44px;
        background: var(--mo-secondary);
        border: 1px solid var(--mo-line);
        border-radius: var(--mo-radius);
        color: var(--mo-ink);
        transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .auth-shell .input-field > input:focus:not([readonly]) {
        border-color: var(--mo-interactive);
        box-shadow: 0 0 0 3px rgba(24, 99, 220, .15);
        background: var(--mo-bg);
    }
    /* Floating label repositioned for the boxed input. Resting state sits
       centred inside the 48px field; active state lifts into the reserved pad. */
    .auth-shell .input-field > label {
        top: 22px;
        left: 0;   /* align label to the field's left edge */
        height: 48px;
        line-height: 48px;
        color: var(--mo-muted);
        transform-origin: 0 50%;
    }
    /* Cancel Materialize's .prefix ~ label indent so the label aligns with the
       input text (both at 44px). Higher specificity via .auth-shell. */
    .auth-shell .input-field > .prefix ~ label { margin-left: 0; }
    .auth-shell .input-field > input:focus:not([readonly]) ~ label { color: var(--mo-interactive); }
    .auth-shell .input-field > input:focus:not([readonly]) ~ label,
    .auth-shell .input-field > input:not(:placeholder-shown) ~ label,
    .auth-shell .input-field > input.valid ~ label,
    .auth-shell .input-field > label.active {
        transform: translateY(-30px) scale(.8);
    }
    /* Leading icon */
    .auth-shell .input-field > .prefix {
        position: absolute;
        top: 35px;
        left: 12px;
        font-size: 22px;
        color: var(--mo-muted);
        transition: color .15s ease;
    }
    .auth-shell .input-field > input:focus:not([readonly]) ~ .prefix { color: var(--mo-interactive); }

    /* Password show/hide toggle */
    .auth-shell .pw-toggle {
        position: absolute;
        top: 30px;
        right: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: var(--mo-muted);
        cursor: pointer;
        border-radius: 50%;
    }
    .auth-shell .pw-toggle:hover { color: var(--mo-interactive); background: var(--mo-secondary); }
    .auth-shell .pw-toggle .material-icons { font-size: 20px; }

    /* Row between the two fields */
    .auth-shell .auth-fields { display: flex; flex-direction: column; gap: 14px; }

    /* Remember / forgot row */
    .auth-shell .auth-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 20px;
    }
    /* Custom-styled checkbox (Materialize's needs a span; keep it simple) */
    .auth-shell .auth-remember {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: .9rem;
        color: var(--mo-ink);
        cursor: pointer;
        user-select: none;
    }
    .auth-shell .auth-remember input[type="checkbox"] {
        position: static;
        opacity: 1;
        pointer-events: auto;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--mo-interactive);
        cursor: pointer;
    }
    /* Primary button — full width, brand */
    .auth-shell .auth-submit {
        width: 100%;
        height: 48px;
        margin-top: 24px;
        border: 0;
        border-radius: var(--mo-radius);
        background: var(--mo-primary);
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .2px;
        cursor: pointer;
        transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
    }
    .auth-shell .auth-submit:hover { background: var(--mo-primary-hover); box-shadow: var(--mo-shadow-md); }
    .auth-shell .auth-submit:active { transform: translateY(1px); }

    /* Validation messages */
    .auth-shell .invalid-feedback {
        display: block;
        margin-top: 8px;
        font-size: .82rem;
        color: var(--mo-error);
    }
    .auth-shell .input-field > input.invalid { border-color: var(--mo-error-line); }

    @media (max-width: 480px) {
        .auth-shell .auth-body { padding: 24px 20px 28px; }
    }
</style>
@endverbatim
@endpush

@section('content')
<div class="auth-shell">
    <div class="auth-brand">
        <img src="{{ asset('images/brand/muveone-logo.svg') }}" alt="MuveOne">
    </div>

    <div class="auth-card">
        <div class="auth-body">
            <div class="auth-head">
                <h1>{{ __('Welcome back') }}</h1>
                <p>{{ __('Sign in to the MuveOne Pricer') }}</p>
            </div>

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

                <div class="auth-fields">
                    <div class="input-field">
                        <i class="material-icons prefix" aria-hidden="true">mail_outline</i>
                        <input id="email" type="email" name="email" value="{{ old('email') }}"
                               class="validate @error('email') invalid @enderror"
                               autocomplete="email" autofocus inputmode="email" placeholder=" ">
                        <label for="email">{{ __('E-Mail Address') }}</label>
                        @error('email')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>

                    <div class="input-field">
                        <i class="material-icons prefix" aria-hidden="true">lock_outline</i>
                        <input id="password" type="password" name="password"
                               class="validate @error('password') invalid @enderror"
                               autocomplete="current-password" placeholder=" ">
                        <label for="password">{{ __('Password') }}</label>
                        <button type="button" class="pw-toggle" aria-label="{{ __('Show password') }}" data-pw-toggle>
                            <i class="material-icons" aria-hidden="true">visibility_off</i>
                        </button>
                        @error('password')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>
                </div>

                <div class="auth-options">
                    <label class="auth-remember">
                        <input name="remember" type="checkbox" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <span>{{ __('Remember me') }}</span>
                    </label>
                </div>

                <input type="submit" class="auth-submit" value="{{ __('Login') }}">

            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    (function () {
        var btn = document.querySelector('[data-pw-toggle]');
        if (!btn) return;
        var input = document.getElementById('password');
        var icon = btn.querySelector('.material-icons');
        btn.addEventListener('click', function () {
            var show = input.type === 'password';
            input.type = show ? 'text' : 'password';
            icon.textContent = show ? 'visibility' : 'visibility_off';
            btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
        });
    })();
</script>
@endsection