@extends('layouts.auth')

@section('content')
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-5 col-xl-6">
            <div class="auth-card">
                <div class="card-body p-4 p-sm-5">
                    <div class="text-center mb-4">
                        <img src="{{ asset('assets/img/logo.png') }}" alt="Tanjoeng Farm Logo" class="auth-header-logo" />
                        <h2 class="fw-bold text-dark h4 mb-1">Selamat Datang!</h2>
                        <p class="text-muted small">Masuk untuk melanjutkan belanja produk segar.</p>
                    </div>

                    @if (session('success'))
                        <div class="alert alert-success py-2 px-3 small rounded-3">{{ session('success') }}</div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger py-2 px-3 small rounded-3">{{ session('error') }}</div>
                    @endif
                    @if (session('info'))
                        <div class="alert alert-info py-2 px-3 small rounded-3">{{ session('info') }}</div>
                    @endif
                    @if (session('warning'))
                        <div class="alert alert-warning py-2 px-3 small rounded-3">{{ session('warning') }}</div>
                    @endif

                    <form action="{{ route('login.post') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="email" class="form-label small fw-semibold text-dark">Alamat Email</label>
                            <input type="email" class="form-control form-control-lg @error('email') is-invalid @enderror"
                                id="email" name="email" value="{{ old('email') }}"
                                placeholder="user@gmail.com" required autofocus>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label small fw-semibold text-dark mb-1">Kata Sandi</label>

                            <div class="position-relative">
                                <input type="password"
                                    class="form-control form-control-lg pe-5 @error('password') is-invalid @enderror"
                                    id="password" name="password" placeholder="Masukkan kata sandi" required>
                                <button type="button" id="togglePassword"
                                    class="btn position-absolute top-50 end-0 translate-middle-y me-2 text-muted border-0 bg-transparent"
                                    style="z-index: 10;">
                                    <i class="bi bi-eye" id="toggleIcon" style="font-size: 1.25rem;"></i>
                                </button>
                            </div>

                            @error('password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror

                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div class="form-check mb-0">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" value="1">
                                    <label class="form-check-label small fw-medium text-secondary" for="remember">
                                        Ingat Saya
                                    </label>
                                </div>
                                <a href="{{ route('auth.forgot-password', ['token' => \App\Services\RouteTokenService::getToken()]) }}" class="small text-decoration-none fw-medium"
                                    style="color: var(--primary);">Lupa Sandi?</a>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary-auth w-100">
                            Masuk
                        </button>
                        <div class="text-center mt-2">
                            <small class="text-muted" style="font-size: 0.75rem;"><i class="bi bi-info-circle me-1"></i>Demi keamanan, percobaan masuk dibatasi 10x per menit.</small>
                        </div>
                    </form>

                    <div class="text-center mt-4 pt-4 border-top">
                        <p class="small text-muted mb-0">Belum punya akun? <a href="{{ route('register') }}"
                                class="fw-bold text-decoration-none" style="color: var(--primary);">Daftar Sekarang</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.querySelector('#togglePassword');
            const password = document.querySelector('#password');
            const toggleIcon = document.querySelector('#toggleIcon');

            togglePassword.addEventListener('click', function() {
                // Toggle tipe input dari password ke text atau sebaliknya
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);

                // Toggle ikon mata terbuka / mata tertutup
                if (type === 'text') {
                    toggleIcon.classList.remove('bi-eye');
                    toggleIcon.classList.add('bi-eye-slash');
                } else {
                    toggleIcon.classList.remove('bi-eye-slash');
                    toggleIcon.classList.add('bi-eye');
                }
            });
        });
    </script>
@endsection