@extends('layouts.adminLayout.app')

@section('content')
<style>
    .field-icon {
        cursor: pointer;
        position: absolute;
        font-size: 20px;
        right: 40px;
        /* top: 50px; */
        transform: translateY(-170%);
    }
    /* Styles for Font Awesome icons */
    .fa-eye {
        color: #818080;
    }
    .fa-eye-slash {
        color: #333;
    }
</style>
<main role="main" class="flex-shrink-0">
    <div class="container custom-container">

        <div class="login-5 mt-50 mb-50">
                <div class="col-sm-12">
                    <!-- @if ($errors->any())
                        <div class="d-flex justify-content-between alert alert-danger mt-3">
                        @foreach ($errors->all() as $error)
                            {{ $error }}
                        @endforeach
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif -->
                <div>
            <div class="row align-items-stretch">
                <div class="col-sm-6">
                    <div class="card card-white custom-card ovrflw h-100">
                        <div class="form-inner login-outside-container h-100">
                            <h3 class="mb-5 fw-bold">Set Password </h3>
                            <form method="POST" action="{{ route('admin.admin-forgot-passwords') }}">
                                @csrf
                                
                                <div class="mb-3">
                                    <label for="username" class="field-loginformmodel-username required">Password <span class="astric-sign text-danger">*</span></label>
                                    <input id="password" type="password" class="form-control form-control-lg  @error('username') is-invalid @enderror" autocomplete="off" name="password" placeholder="Enter Password"  autofocus>
                                    @error('password')
                                    <div class="invalid-feedback__">
                                       <span style="color:red"> {{ $message }}</span>
                                    </div>
                                    @enderror
                                </div>
                                <input type="hidden" name="token" value="{{$token}}" >
                                <div class="mb-3">
                                    <label for="confirmpassword" class="field-loginformmodel-username required">Confirm Password<span class="astric-sign text-danger">*</span></label>
                                    <input id="Email" type="password" class="form-control form-control-lg" autocomplete="off" name="confirmpassword" placeholder="Enter Confirm Password" >
                                    @error('confirmpassword')
                                    <div class="invalid-feedback__">
                                    <span style="color:red"> {{ $message }}</span>
                                    </div>
                                    @enderror
                                </div>
                               
                                <button type="submit" class="mt-5 btn btn-primary btn-lg btn-theme">
                                    Submit
                                </button>
                                <a href="{{route('admin.login')}}"><b>Login</b></a>
                            </div>    
                        </form>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card card-white">
                        <div class="card custom-card">
                            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                <!-- <h1 class="m-0 font-weight-normal text-head-color"><i class="fa fa-info-circle"></i> INTRODUCTION</h1> -->
                            </div>
                            <div class="card-body ovrflwss">
                                <div class="news-eve-scroll pr-2">
                                    <div class="custom-svg text-center">
                                        <img class="img-fluid" src="{{ URL::asset('assets/images/reset-password.png') }}" alt="reset-password.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection
@section('script')
<script>
    $(document).on('click', '.toggle-password', function() {
        $(this).toggleClass('fa-eye fa-eye-slash');
        var input = $($(this).attr('toggle'));
        if (input.attr('type') == 'password') {
            input.attr('type', 'text');
        } else {
            input.attr('type', 'password');
        }
    });
    </script>
@endsection