@extends('Frontend.layouts.app')

@section('content')
<style>
    .top-space {
        margin-top: 20%;
    }
    .btn-solid:hover {
        color: #000;
        background-color: #ff4c3b;
    }
    .password-wrapper {
        position: relative;
    }
    .toggle-password {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        cursor: pointer;
        color: #aaa;
    }
</style>

<div class="ecom-main">

    <!-- login section start -->
    <section class="form-section px-15 top-space section-b-space">
        <div class="card p-3" style="width: 70%; text-align: center;margin-left: 15%;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">

            <h1>Login Now</h1>
            <form action="{{ route('login.submit') }}" method="post">
                @csrf
                <div class="form-floating mb-4">
                    <input type="text" name="email" class="form-control" id="one" placeholder="Email">
                    <label for="one">Username or Email</label>
                </div>
                <div class="form-floating mb-2 password-wrapper">
                    <input type="password" name="password" class="form-control" id="password" placeholder="Password">
                    <label for="password">Password</label>
                    <span class="toggle-password" onclick="togglePassword()">
                        👁️
                    </span>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-solid w-30">Sign in</button>
                </div>
            </form>
        </div>
    </section>
    <!-- login section end -->

</div>

<script>
    function togglePassword() {
        const input = document.getElementById("password");
        const type = input.getAttribute("type") === "password" ? "text" : "password";
        input.setAttribute("type", type);
    }
</script>

@endsection