@extends('v2.layouts.auth')

@section('title', 'Columbus 17 | Log In')

@section('content')
    <section class="relative flex flex-col justify-center h-full">
        <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto">
            <div class="flex items-center h-full wow animate__animated animate__fadeIn animated" data-wow-delay=".1s">
                <img class="lg:max-w-lg mx-auto" src="{{ asset('storage/imgs/illustrations/space.svg')}}" alt="" />
            </div>
        </div>
        <div class="container">
            <div class="relative flex flex-wrap pt-12">
                <div class="lg:flex lg:flex-col w-full lg:w-1/2 py-6 lg:pr-20">
                    <div class="w-full max-w-lg mx-auto lg:mx-0 my-auto wow animate__animated animate__fadeIn animated" data-wow-delay=".3s">
                        <span class="text-sm text-blueGray-400">Sign In</span>
                        <h4 class="mb-6 text-3xl">Join our community</h4>
                        @if(Session::has('message'))
                            <div id="alert-3" class="flex items-center justify-between p-4 mb-4 text-green-800 rounded-lg bg-green-300 dark:bg-gray-800 dark:text-green-400" role="alert">
                                <i class="fa fa-info-circle" aria-hidden="true"></i>
                                <div class="text-sm font-medium">
                                    {{ session('message') }}
                                </div>
                                <i class="fa fa-times hover:cursor-pointer" aria-hidden="true" data-dismiss-target="#alert-3"></i>
                            </div>
                        @endif
                        <form action="{{ route('authenticate') }}" method="POST">
                            @csrf
                            <div class="flex flex-col mb-4">
                                <div class="flex px-4 bg-blueGray-50 rounded border border-gray-200">
                                    <input 
                                        class="@error('email') border-2 border-red-500 @enderror w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
                                        type="email"
                                        placeholder="name@email.com"
                                        name="email" id="email"
                                        value="{{ old('email') }}"
                                        required/>
                                    <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                                    </svg>
                                </div>
                                @if ($errors->has('email'))
                                    <span class="text-red-500" style="color:red">{{ $errors->first('email') }}</span>
                                @endif
                            </div>
                            <div class="flex flex-col mb-4">
                                <div class="flex px-4 bg-blueGray-50 rounded border border-gray-200">
                                    <input
                                        class="@error('password') border-2 border-red-500 @enderror w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" 
                                        type="password"
                                        name="password"
                                        id="password" 
                                        placeholder="Enter your password"
                                        required
                                        />
                                    <button type="button" id="togglePassword" class="ml-4">
                                        <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                        </svg>
                                    </button>
                                </div>
                                @if ($errors->has('password'))
                                    <span class="text-red-500" style="color:red">{{ $errors->first('password') }}</span>
                                @endif
                            </div>
                            <div class="flex items-center justify-between mb-6">
                                <div class="flex items-center h-5">
                                    <input name="remember_me" id="remember" type="checkbox" value="true" class="mr-2 form-check-input w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"/>
                                    <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember Me</label>
                                </div>
                                <a class="self-end text-blue-500 font-semibold" href="{{ url('./forget-password') }}">Forgot Password?</a>
                            </div>
                            <button class="transition duration-300 ease-in-out transform hover:-translate-y-1 block w-full p-4 text-center text-xs text-white font-semibold leading-none bg-blue-500 hover:bg-blue-700 rounded">Sign In</button>
                        </form>
                    </div>

                    <div class="w-full mt-12 mx-auto text-center">
                        <p>Don't Have an Account? <a class="inline-block text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none wow animate__animated animate__fadeIn animated" data-wow-delay=".1s" href="{{ route('register.create') }}">Sign Up now</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const passwordInput = document.querySelector('#password');

        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
        });
    </script>
@endsection