@extends('layouts.app')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    .ff-login-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("{{ asset('assets/background.png') }}");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        font-family: 'Inter', sans-serif;
    }

    .ff-login-card {
        width: 100%;
        max-width: 440px;
        border-radius: 20px;
        padding: 40px 35px 35px 35px;
        background: rgba(30, 30, 30, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: #fff;
    }

    .ff-logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
        margin-top: -33px;
    }

    .ff-logo-container img {
        width: 320px;
        max-width: 100%;
        height: auto;
        transform: scale(1.15);
    }

    .ff-subtitle {
        text-align: center;
        margin-bottom: 25px;
    }

    .ff-subtitle h4 {
        margin: 0;
        font-weight: 700;
        font-size: 25px;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .ff-subtitle p {
        margin: 6px 0 0;
        color: rgba(255, 255, 255, 0.6);
        font-size: 15px;
        font-weight: 400;
    }

    .ff-input-wrap {
        position: relative;
        margin-bottom: 16px;
    }

    .ff-input-wrap i {
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
    }

    .ff-input-wrap .ff-toggle-password {
        left: auto;
        right: 18px;
        cursor: pointer;
    }

    .ff-input {
        width: 100%;
        height: 52px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: transparent;
        color: #fff;
        padding: 0 50px;
        font-size: 15px;
        transition: all 0.3s ease;
    }

    .ff-input:focus {
        outline: none;
        border-color: #FFC107;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Prevent Chrome autofill from turning background white */
    .ff-input:-webkit-autofill,
    .ff-input:-webkit-autofill:hover, 
    .ff-input:-webkit-autofill:focus, 
    .ff-input:-webkit-autofill:active {
        -webkit-text-fill-color: white !important;
        transition: background-color 5000s ease-in-out 0s;
    }

    .ff-input::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .ff-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0 25px;
    }

    .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-check-label {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        cursor: pointer;
    }

    .form-check-input {
        width: 16px;
        height: 16px;
        margin: 0;
        background-color: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-check-input:checked {
        background-color: #FFB300;
        border-color: #FFB300;
    }

    .form-check-input:checked::before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: #000;
        font-size: 10px;
    }

    .ff-forgot {
        color: #FFB300;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        opacity: 0.9;
        transition: opacity 0.3s;
    }

    .ff-forgot:hover {
        opacity: 1;
        text-decoration: underline;
    }

    .ff-submit {
        width: 100%;
        height: 52px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(to right, #FFC107, #F57F17);
        color: #000;
        font-size: 17px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .ff-submit:hover {
        transform: translateY(-2px);
        background: linear-gradient(to right, #FFCA28, #FF8F00);
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    }

    @media (max-width: 500px) {
        .ff-login-card { padding: 30px 20px; }
        .ff-subtitle h4 { font-size: 22px; }
        .ff-subtitle p { font-size: 14px; }
        .ff-logo-container img { transform: scale(1.05); }
    }
</style>

<div class="ff-login-page">
    <div class="ff-login-card">
        <div class="ff-logo-container">
            <img src="{{ asset('assets/flink_freight_logo.png') }}" alt="Flink Freight">
        </div>

        <div class="ff-subtitle">
            {{-- <h4>Welcome Back</h4> --}}
            <p>Sign in to your account</p>
        </div>

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

            <div class="ff-input-wrap">
                <i class="fa-regular fa-envelope"></i>
                <input id="email" type="email" class="ff-input @error('email') is-invalid @enderror" name="email"
                    value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Email address">
                @error('email')
                    <div class="ff-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="ff-input-wrap">
                <i class="fa-solid fa-lock"></i>
                <input id="password" type="password" class="ff-input @error('password') is-invalid @enderror"
                    name="password" required autocomplete="current-password" placeholder="Password">
                <i id="togglePassword" class="fa-regular fa-eye-slash ff-toggle-password"></i>
                @error('password')
                    <div class="ff-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="ff-row">
                <div class="form-check m-0">
                    <input class="form-check-input" type="checkbox" name="remember" id="remember"
                        {{ old('remember') ? 'checked' : '' }}>
                    <label class="form-check-label" for="remember">
                        Remember me
                    </label>
                </div>
                {{-- @if (Route::has('password.request'))
                    <a class="ff-forgot" href="{{ route('password.request') }}">Forgot password?</a>
                @endif --}}
            </div>

            <button type="submit" class="ff-submit">
                Sign In
            </button>
        </form>

        {{-- @if (Route::has('register'))
            <div class="text-center mt-4">
                <p class="m-0" style="color: rgba(255,255,255,0.6); font-size: 14px;">
                    Don't have an account? 
                    <a href="{{ route('register') }}" style="color: #FFB300; text-decoration: none; font-weight: 600;">Sign Up</a>
                </p>
            </div>
        @endif --}}
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        if (togglePassword && passwordInput) {
            togglePassword.addEventListener('click', function() {
                const isPassword = passwordInput.getAttribute('type') === 'password';
                passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
                togglePassword.classList.toggle('fa-eye');
                togglePassword.classList.toggle('fa-eye-slash');
            });
        }
    });
</script>
@endsection