@extends('layouts.main')

@section('content')
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <div class="login-page">

        <div class="container auth-container">

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

                    @if (!empty($redirect))
                        <input type="hidden" name="redirect" value="{{ $redirect }}">
                    @endif

                    <h1>Login</h1>

                    <!-- Error Message -->
                    @if ($errors->any())
                        <div class="alert alert-danger"
                            style="padding: 12px; margin-bottom: 20px; border-radius: 8px; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger"
                            style="padding: 12px; margin-bottom: 20px; border-radius: 8px; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;">
                            {{ session('error') }}
                        </div>
                    @endif

                    <!-- Success Message -->
                    @if (session('success'))
                        <div class="alert alert-success"
                            style="padding: 12px; margin-bottom: 20px; border-radius: 8px; background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="input-box">
                        <input type="email" name="email" placeholder="Email" required>
                        <i class='bx bxs-user'></i>
                    </div>

                    <div class="input-box">
                        <input type="password" name="password" placeholder="Password" required>
                        <i class='bx bxs-lock-alt'></i>
                    </div>

                    <div class="forgot-link">
                        <a href="{{ route('password.request') }}">Forgot Password?</a>
                    </div>

                    <div class="not-member">
                        <p>Not a member yet? <a href="{{ route('register') }}">Register Here</a></p>
                    </div>

                    <button type="submit" class="btn">Login</button>
                </form>
            </div>

            <div class="toggle-box">
                <div class="toggle-panel toggle-left">
                    <img src="{{ asset('img/logo.png') }}" alt="Logo" class="logo-img">
                </div>

                <div class="toggle-panel toggle-right">
                    <img src="{{ asset('img/logo.png') }}" alt="Logo" class="logo-img">
                    <button class="btn login-btn">Login</button>
                </div>
            </div>

        </div>

    </div>
@endsection