@extends('frontend.layouts.app')
@section('content')

<div style="
    background:#f2f4f7;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family:'Poppins',sans-serif;
">

    <div style="
        display:flex;
        gap:2rem;
        align-items:stretch;
        flex-wrap:wrap;
        justify-content:center;
    ">

        <!-- Left Card - Image -->
        <div style="
            width:400px;
            min-height:420px;
            border:none;
            border-radius:15px;
            box-shadow:0 4px 20px rgba(0,0,0,0.1);
            overflow:hidden;
            transition:transform .2s ease-in-out;
            background:#fff;
            display:flex;
            flex-direction:column;
        " 
        onmouseover="this.style.transform='translateY(-5px)'"
        onmouseout="this.style.transform='none'">

            <img src="{{ asset('01-07.jpg') }}" alt="Login Image"
                 style="width:100%;height:100%;object-fit:cover;">
        </div>


        <!-- Right Card - Login Form -->
        <div style="
            width:380px;
            min-height:420px;
            border:none;
            border-radius:15px;
            box-shadow:0 4px 20px rgba(0,0,0,0.1);
            overflow:hidden;
            background:#fff;
            padding:2rem;
            display:flex;
            flex-direction:column;
            justify-content:center;
            transition:transform .2s ease-in-out;
        "
        onmouseover="this.style.transform='translateY(-5px)'"
        onmouseout="this.style.transform='none'">

            <h4 style="text-align:center;margin-bottom:1.5rem;">Welcome Back 👋</h4>

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

                <!-- Phone -->
                <div style="margin-bottom:1rem;">
                    <label for="phone" style="font-weight:100;display:block;margin-bottom:6px;">Phone Number</label>
                   <input type="text" id="phone" name="phone" required
       placeholder="Enter phone or username"
       style="
            width:100%;
            border-radius:10px;
            padding:12px 18px;
            border:1px solid #ced4da;
            font-size:1.3rem;
            font-weight:700;
       ">

                </div>

                <!-- Password -->
                <div style="margin-bottom:1rem;">
                    <label for="password" style="font-weight:500;display:block;margin-bottom:6px;">Password</label>

                    <div style="
                        display:flex;
                        border:1px solid #ced4da;
                        border-radius:10px;
                        overflow:hidden;
                    ">
                        <input type="password" id="password" name="password" required
                               placeholder="Enter password"
                               style="
                                    flex:1;
                                    border:none;
                                    padding:10px 15px;
                                    border-radius:10px 0 0 10px;
                                    outline:none;
                               ">

                        <span onclick="togglePassword()"
                              style="
                                  display:flex;
                                  align-items:center;
                                  justify-content:center;
                                  padding:0 15px;
                                  cursor:pointer;
                                  background:#e9ecef;
                                  border-left:1px solid #ced4da;
                              ">
                            <i class="bi bi-eye-slash" id="toggleIcon"></i>
                        </span>
                    </div>
                </div>


                <!-- Remember + Forgot -->
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
                    <div>
                        <input type="checkbox" id="remember" name="remember">
                        <label for="remember" style="font-weight:500;">Remember me</label>
                    </div>
                    <a href="#" style="text-decoration:none;">Forgot password?</a>
                </div>

                <!-- Submit -->
                <button type="submit" 
                    style="
                        width:100%;
                        padding:14px;            
                        border:none;
                        border-radius:10px;
                        background:#18185a;
                        color:white;
                        font-size:1.5rem;      
                        font-weight:600;     
                        cursor:pointer;
                    ">
                    Login
                </button>

            </form>

            <div style="text-align:center; margin-top:1rem;">
                <p style="margin:0;">Don’t have an account? 
                    <a href="#" style="text-decoration:none;">Register</a>
                </p>
            </div>

        </div>

    </div>
</div>

<!-- JS Toggle -->
<script>
function togglePassword() {
    const passwordField = document.getElementById("password");
    const toggleIcon = document.getElementById("toggleIcon");

    if (passwordField.type === "password") {
        passwordField.type = "text";
        toggleIcon.classList.remove("bi-eye-slash");
        toggleIcon.classList.add("bi-eye");
    } else {
        passwordField.type = "password";
        toggleIcon.classList.remove("bi-eye");
        toggleIcon.classList.add("bi-eye-slash");
    }
}
</script>

@endsection