@extends('v2.layouts.auth')

@section('title', 'Columbus 17 | Reset 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">Reset Password</span>
                        <h4 class="mb-6 text-3xl">Join our community</h4>

                        @if($errors->has('token'))
                            <div class="p-8">
                                <p>{{ $errors->first('token') }}</p>
                            </div>
                        @else
                            <form class="mt-4" action="{{ route('reset-password') }}" method="POST">
                                @csrf
                                <input type="hidden" name="token" value="{{$token}}">
                                <div class="flex flex-col mb-4">
                                    <div class="flex px-4 bg-blueGray-50 rounded border border-gray-200">
                                        <input 
                                            class="@error('password') text-danger @enderror w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" 
                                            type="password" 
                                            placeholder="Enter your password"
                                            name="password" 
                                            id="password" />
                                        <button class="ml-4" type="button" id="togglePassword">
                                            <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 flex-col mb-4">
                                    <div class="flex px-4 bg-blueGray-50 rounded border border-gray-200">
                                        <input 
                                            class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
                                            type="password"
                                            placeholder="Confirm password"
                                            name="password_confirmation"
                                            id="confirm_password" />
                                        <button class="ml-4" type="button" id="togglePasswordConfirmation">
                                            <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>
                                <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>
                        @endif
                        @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>
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const togglePasswordConfirmation = document.querySelector('#togglePasswordConfirmation');
        const confirm_password = document.querySelector('#confirm_password');
        const passwordInput = document.querySelector('#password');

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

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