@extends('layouts.authLayout')

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

@section('content')
    <div class="d-flex justify-content-center align-items-center mb-5" style="min-height: 60vh;">
        <div class="p-5 loginModal" style="width: 100%; max-width: 400px;">
            <!-- Logo centrado con tamaño controlado -->
            <div class="text-center mb-4">
                <a href="{{ route('mainPage') }}">
                    <img src="{{ asset('img/dailyStudyLogo.png') }}" alt="DailyStudy Logo" class="img-fluid" style="max-height: 100px;">
                </a>
            </div>
            <h2 class="text-center mb-4">Login</h2>
            <form action="{{ route('auth.signin.submit') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label for="email" class="form-label">Username / Email</label>
                    <input type="text" id="email" name="email" class="form-control auth-input" placeholder="Your username or email" value="{{ old('email') }}">
                </div>
                <div class="mb-4">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" id="password" name="password" class="form-control auth-input" placeholder="Your password">
                    <i class="bi bi-eye-slash" id="togglePassword"></i>
                </div>
                @error('error')
                    <p class="error" style="color: red;">{{ $message }}</p>
                @enderror
                <div class="d-grid d-flex justify-content-center mb-3">
                    <button type="submit" class="btn btn1">Log In</button>
                </div>
            </form>

            <!-- Botón de Google -->
            <div class="text-center my-3 d-flex align-items-center justify-content-center google">
                <a href="{{ route('login-google') }}" class="btn btn1">
                    <img src="https://img.icons8.com/?size=100&id=36987&format=png&color=000000" alt="Google logo" style="width: 20px; height: 20px; margin-bottom: 2px;" class="me-2">
                    <span>Login with Google</span>
                </a>
            </div>
            
            <p class="pt-2 mb-0">Don't have an account? Register <a href="{{ route('registerPage') }}">here</a></p>
            <br>
            <p class="pt-2 mb-0"><a href="{{ route('resetPasswordForm') }}">I forgot my password</a></p>

        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/login.js') }}"></script>

    @if ($errors->has('token'))
        <script>
            Swal.fire({
                icon: 'error',
                title: "{{ $errors->first('token') }}",
                text: "Please submit your new password again",
                confirmButtonColor: '#6f42c1'
            });
        </script>
    @endif
@endsection