@extends('layouts.auth')

@section('title', 'Sign In')

@section('content')
<div class="bv-auth__shell">
    {{-- Brand / illustration panel --}}
    <div class="bv-auth__aside">
        <div class="bv-auth__brand">
            <span class="bv-auth__brand-logo">BV</span>
            <span class="bv-auth__brand-name">
                {{ config('app.name', 'BV-SIS') }}
                <small>Student Information System</small>
            </span>
        </div>

        <div class="bv-auth__hero">
            <h1 class="bv-auth__hero-title">
                The complete <span class="text-gradient">university</span> management platform.
            </h1>
            <p class="bv-auth__hero-text">
                Admissions, registration, finance, examinations and analytics —
                unified in one premium enterprise workspace.
            </p>
        </div>

        <div class="bv-auth__features">
            <div class="bv-auth__feature"><i class="bi bi-shield-lock"></i> Role-based access &amp; full audit trail</div>
            <div class="bv-auth__feature"><i class="bi bi-graph-up-arrow"></i> Real-time executive dashboards</div>
            <div class="bv-auth__feature"><i class="bi bi-lightning-charge"></i> Fast, secure and mobile-ready</div>
        </div>
    </div>

    {{-- Form panel --}}
    <div class="bv-auth__panel">
        <div class="bv-auth__panel-head">
            <h2 class="bv-auth__panel-title">Welcome back</h2>
            <p class="bv-auth__panel-sub">Sign in to continue to your dashboard.</p>
        </div>

        @if(session('status'))
            <div class="bv-alert bv-alert--success mb-4">
                <i class="bi bi-check-circle-fill"></i>
                <span>{{ session('status') }}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="bv-alert bv-alert--danger mb-4">
                <i class="bi bi-exclamation-triangle-fill"></i>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        <form method="POST" action="{{ route('login.attempt') }}" data-bv-login-form>
            @csrf

            <div class="bv-field">
                <label class="bv-field__label" for="email">Email address</label>
                <div class="bv-field__wrap">
                    <i class="bi bi-envelope bv-field__icon" aria-hidden="true"></i>
                    <input type="email"
                           name="email"
                           id="email"
                           class="bv-field__input"
                           value="{{ old('email') }}"
                           placeholder="you@institution.edu"
                           required
                           autofocus
                           autocomplete="email">
                </div>
                @error('email')
                    <div class="bv-field__error"><i class="bi bi-info-circle"></i> {{ $message }}</div>
                @enderror
            </div>

            <div class="bv-field">
                <label class="bv-field__label" for="password">Password</label>
                <div class="bv-field__wrap">
                    <i class="bi bi-lock bv-field__icon" aria-hidden="true"></i>
                    <input type="password"
                           name="password"
                           id="password"
                           class="bv-field__input"
                           placeholder="Enter your password"
                           required
                           autocomplete="current-password"
                           data-bv-password>
                    <button type="button" class="bv-field__toggle" data-bv-password-toggle aria-label="Show password">
                        <i class="bi bi-eye" aria-hidden="true"></i>
                    </button>
                </div>
                @error('password')
                    <div class="bv-field__error"><i class="bi bi-info-circle"></i> {{ $message }}</div>
                @enderror
            </div>

            <div class="bv-auth__row">
                <label class="bv-check">
                    <input type="checkbox" name="remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                    <span>Remember me</span>
                </label>
                <a href="#" class="bv-auth__forgot">Forgot password?</a>
            </div>

            <button type="submit" class="bv-auth__submit" data-bv-submit>
                <span class="bv-auth__submit-label">Sign in</span>
                <i class="bi bi-arrow-right"></i>
                <span class="bv-spinner" aria-hidden="true"></span>
            </button>
        </form>

        <div class="bv-auth__footer">
            Powered by <strong>BIG VOICE TECHNOLOGIES</strong> · &copy; {{ date('Y') }}
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function () {
        var toggle = document.querySelector('[data-bv-password-toggle]');
        var pwd = document.querySelector('[data-bv-password]');
        if (toggle && pwd) {
            toggle.addEventListener('click', function () {
                var isPwd = pwd.type === 'password';
                pwd.type = isPwd ? 'text' : 'password';
                toggle.querySelector('i').className = isPwd ? 'bi bi-eye-slash' : 'bi bi-eye';
            });
        }

        var form = document.querySelector('[data-bv-login-form]');
        var submit = document.querySelector('[data-bv-submit]');
        if (form && submit) {
            form.addEventListener('submit', function () {
                submit.classList.add('is-loading');
                submit.disabled = true;
            });
        }
    })();
</script>
@endpush
@endsection