@extends('layouts.auth')

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

@section('content')
<div class="auth-card">
    <h2>Welcome back</h2>
    <p class="subtitle">Sign in to your CashBaba account</p>

    {{-- Error Alert --}}
    @if(session('error'))
    <div class="alert alert-error">
        <i class="fas fa-circle-exclamation"></i>
        {{ session('error') }}
    </div>
    @endif

    {{-- Success Alert (after logout) --}}
    @if(session('success'))
    <div class="alert alert-success">
        <i class="fas fa-circle-check"></i>
        {{ session('success') }}
    </div>
    @endif

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

        {{-- Email --}}
        <div class="form-group">
            <label for="email">Email Address</label>
            <div class="input-wrap">
                <i class="fas fa-envelope prefix"></i>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value="{{ old('email') }}"
                    placeholder="you@cashbaba.com"
                    autocomplete="email"
                    autofocus
                    class="{{ $errors->has('email') ? 'is-invalid' : '' }}"
                    required
                >
            </div>
            @error('email')
                <span class="invalid-feedback">{{ $message }}</span>
            @enderror
        </div>

        {{-- Password --}}
        <div class="form-group">
            <label for="password">Password</label>
            <div class="input-wrap">
                <i class="fas fa-lock prefix"></i>
                <input
                    type="password"
                    id="password"
                    name="password"
                    placeholder="Your password"
                    autocomplete="current-password"
                    class="{{ $errors->has('password') ? 'is-invalid' : '' }}"
                    required
                >
                <button type="button" class="toggle-pass" onclick="togglePassword()" id="toggleBtn">
                    <i class="fas fa-eye" id="toggleIcon"></i>
                </button>
            </div>
            @error('password')
                <span class="invalid-feedback">{{ $message }}</span>
            @enderror
        </div>

        {{-- Remember & Forgot --}}
        <div class="form-meta">
            <label class="remember-me">
                <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                Remember me
            </label>
            <a href="{{ route('password.request') }}" class="forgot-link">Forgot password?</a>
        </div>

        <button type="submit" class="btn-primary" id="submitBtn">
            <i class="fas fa-right-to-bracket"></i>&nbsp; Sign In
        </button>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function togglePassword() {
        const input = document.getElementById('password');
        const icon  = document.getElementById('toggleIcon');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }

    document.getElementById('loginForm').addEventListener('submit', function () {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>&nbsp; Signing in…';
    });
</script>
@endpush