@extends('v2.layouts.auth')

@section('title', 'Columbus 17 | Forget Password')

@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">Forget Password</span>
                        <h4 class="mb-6 text-3xl">Join our community</h4>
                        <form class="mt-4" action="./forget-password" 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>
                            <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">Send Password Reset Link</button>
                        </form>

                        @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
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection