@extends('login.layout')
@section('content')

<h2 class="mt-6 text-center text-[26px] font-bold tracking-tight text-gray-900">Set Password</h2>
<div class="mt-6 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white py-8 px-4 border border-gray-100 shadow sm:rounded-lg sm:px-10">
        @if ($message = Session::get('error'))
            <div class="bg-red-100 rounded-lg py-3 px-3 text-sm text-red-700 inline-flex items-center w-full mb-3" role="alert">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle"
                    class="w-4 h-4 mr-2 fill-current" role="img" xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 512 512">
                    <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z">
                    </path>
                </svg>
                {{ $message }}
            </div>
        @endif
        <form action="/change-password-by-otp" method="POST">
            @csrf
            <input type="hidden" value="{{$id}}" name="id">
            <input type="hidden" value="{{$auth_code}}" name="auth_code">

            <div class="block">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700">{{__('OTP_text')}}</label>
                    <div class="mt-1">
                        <input  name="otp" id="user_otp" placeholder="i.e 123456" type="text" class="block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm border-gray-300" required>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-700">{{__('New_Password')}}</label>
                    <div class="relative mt-1 rounded-md shadow-sm">
                        <input type="password" name="password" id="password" class="block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm border-gray-300" placeholder="i.e. password#123" required>
                        <i class="absolute top-[13px] right-3 text-gray-600 fa fa-eye toggle-password"></i>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-700">{{__('Confirm_New_Password')}}</label>
                    <div class="relative mt-1 rounded-md shadow-sm">
                        <input type="password" name="password_confirmation" id="password_confirmation" class="block w-full appearance-none rounded-md border px-3 py-2 placeholder-gray-400 shadow-sm focus:border-green-500 focus:outline-none focus:ring-green-500 sm:text-sm border-gray-300" placeholder="i.e. password#123" required>
                        <i class="absolute top-[13px] right-3 text-gray-600 fa fa-eye toggle-password"></i>
                    </div>
                </div>
                <div class="pt-0"><button type="submit" class="flex w-full justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 submit-btn">{{__('Change_Password')}}</button></div>
            </div>
        </form>
    </div>
</div>

@endsection