@extends('layouts.auth')

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

@section('content')
    @if (session('status'))
        <div class="alert alert-success border-0 py-2 mb-3" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ session('status') }}
        </div>
    @endif

    <h5 class="fw-bold text-center mb-1">Welcome Back</h5>
    <p class="text-muted text-center small mb-4">Sign in to continue to your panel</p>

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

        <div class="mb-3">
            <label for="email" class="form-label fw-medium small">Email Address</label>
            <input
                type="email"
                class="form-control form-control-lg @error('email') is-invalid @enderror"
                id="email"
                name="email"
                value="{{ old('email') }}"
                placeholder="you@example.com"
                required
                autofocus
                autocomplete="email"
            >
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password" class="form-label fw-medium small">Password</label>
            <div class="input-group has-validation">
                <input
                    type="password"
                    class="form-control form-control-lg @error('password') is-invalid @enderror"
                    id="password"
                    name="password"
                    placeholder="Min. 8 characters"
                    required
                    autocomplete="current-password"
                >
                <button class="btn btn-outline-secondary" type="button" id="togglePassword" tabindex="-1">
                    <i class="bi bi-eye" id="eyeIcon"></i>
                </button>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mb-4 d-flex justify-content-between align-items-center">
            <div class="form-check mb-0">
                <input
                    class="form-check-input"
                    type="checkbox"
                    name="remember"
                    id="remember"
                    {{ old('remember') ? 'checked' : '' }}
                >
                <label class="form-check-label text-muted small" for="remember">Remember me</label>
            </div>
            <a href="{{ route('password.request') }}"
               class="text-decoration-none small fw-medium"
               style="color: #e8a94b;">
                Forgot password?
            </a>
        </div>

        <button
            type="submit"
            class="btn btn-lg w-100 fw-semibold text-white"
            style="background-color: #1a2a4a; border-color: #1a2a4a;"
        >
            Sign In &nbsp;<i class="bi bi-arrow-right"></i>
        </button>
    </form>
@endsection

@push('scripts')
<script>
    const btn      = document.getElementById('togglePassword');
    const input    = document.getElementById('password');
    const eyeIcon  = document.getElementById('eyeIcon');
    btn.addEventListener('click', function () {
        input.type = input.type === 'password' ? 'text' : 'password';
        eyeIcon.classList.toggle('bi-eye');
        eyeIcon.classList.toggle('bi-eye-slash');
    });
</script>
@endpush