@extends('layouts.app')
@section('title', 'Log In Here! — JOBES')

@section('content')
<div class="d-flex align-items-center justify-content-center" style="background:#ffffff; min-height:85vh; padding-top:4rem; padding-bottom:4rem;">
    <div class="container">
        
        <!-- Header Page Title -->
        <div class="text-center mb-5 animate__animated animate__fadeInDown">
            <h1 class="fw-900 text-dark mb-2" style="font-size:2.4rem; letter-spacing:-1px;">Log In Here!</h1>
            <div class="d-flex justify-content-center">
                <span style="width:6px; height:6px; background:#0d9488; border-radius:50%; display:block;"></span>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-8 col-sm-10 col-12">
                
                <!-- White Custom Login Card -->
                <div class="card bg-white border p-5 rounded-4 shadow-xl animate__animated animate__fadeInUp" style="border-color:#e2e8f0 !important; box-shadow: 0 20px 40px rgba(0,0,0,0.03) !important;">
                    
                    @if($errors->any())
                    <div class="alert alert-danger border-0 rounded-3 mb-4 text-start" style="background:rgba(239,68,68,0.08); color:#ef4444; font-size:0.88rem; font-weight:600;">
                        <i class="fas fa-exclamation-circle me-1"></i> {{ $errors->first() }}
                    </div>
                    @endif

                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        
                        <!-- Email Input Block -->
                        <div class="mb-4 text-start">
                            <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Email*</label>
                            <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                <span class="text-muted pe-2" style="font-size:0.95rem; border-right:1px solid #e2e8f0;"><i class="far fa-envelope text-muted"></i></span>
                                <input type="email" name="email" value="{{ old('email') }}" class="form-control border-0 bg-transparent text-dark ps-3 focus-none py-2" placeholder="info@example.com" required style="outline:none; box-shadow:none; font-weight:500;">
                            </div>
                        </div>

                        <!-- Password Input Block -->
                        <div class="mb-4 text-start">
                            <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Password*</label>
                            <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                <input type="password" name="password" id="loginPass" class="form-control border-0 bg-transparent text-dark focus-none py-2" placeholder="Password" required style="outline:none; box-shadow:none; font-weight:500;">
                                <span class="ps-2 cursor-pointer text-muted" onclick="togglePass('loginPass')" style="font-size:0.95rem; border-left:1px solid #e2e8f0;">
                                    <i class="far fa-eye-slash" id="loginPassIcon"></i>
                                </span>
                            </div>
                        </div>

                        <!-- Remember & Forget password Row -->
                        <div class="d-flex justify-content-between align-items-center mb-4 text-start">
                            <div class="form-check d-flex align-items-center gap-2">
                                <input type="checkbox" class="form-check-input filter-radio-custom cursor-pointer" name="remember" id="remember" style="border-radius:4px;">
                                <label class="form-check-label text-dark small fw-800 cursor-pointer" for="remember" style="user-select:none;">Remember Me</label>
                            </div>
                            <a href="{{ route('password.request') }}" class="text-teal-accent small fw-800 text-decoration-underline">Forget Password?</a>
                        </div>

                        <!-- Submit login button -->
                        <button type="submit" class="btn btn-primary-gradient w-100 py-3 fw-800 fs-6 rounded-3" style="letter-spacing:0.5px;">
                            Login
                        </button>
                    </form>

                    <!-- Redirection to register page -->
                    <div class="text-center mt-4">
                        <p class="text-muted small mb-0 fw-600">Don't have an account? <a href="{{ route('register') }}" class="text-teal-accent fw-800 text-decoration-none hover-teal">Sign Up</a></p>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</div>
@endsection

@section('scripts')
<script>
function togglePass(id) {
    const input = document.getElementById(id);
    const icon = document.getElementById(id + 'Icon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'far fa-eye';
    } else {
        input.type = 'password';
        icon.className = 'far fa-eye-slash';
    }
}
</script>
@endsection

@section('styles')
<style>
    .fw-900 { font-weight: 900; }
    .fw-800 { font-weight: 800; }
    .focus-none:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    
    .filter-radio-custom {
        width: 17px;
        height: 17px;
        border-color: #cbd5e1;
        cursor: pointer;
    }
    .filter-radio-custom:checked {
        background-color: #0d9488 !important;
        border-color: #0d9488 !important;
    }
</style>
@endsection