@extends('frontend.layouts.layout_page')

@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('global.reset_password') }}</title>
@endsection
@section('style')
<link href="{{ asset('assets/css/icons.css')}}" rel="stylesheet">
@endsection
@section('content')
    <section class="burger p-relative auth">
        <div class="ccontainer">
            <div class="crow g-0">
                <div class="ccol ccol-lg-3 ccol-md-4 ccol-sm-4 ccol-6 mx-auto py-0">
                    <h2 class="heading_2 text-black">{{ trans('global.reset_password') }}</h2>
                    <hr class="mt-1 mb-2" />

                    @if(session()->has('success') || session()->has('status'))
                        <div class="alert alert-success">
                            {{ session()->get('status') }}
                        </div>
                    @endif
                    @if(session()->has('error'))
                        <div class="alert alert-danger">
                            {{ session()->get('error') }}
                        </div>
                    @endif
                    @if(session('message'))
                        <div class="alert alert-success" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif
                    @if($errors->count() > 0)
                        <div class="alert alert-danger">
                            <ul class="list-unstyled">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif          

                    <form method="POST" class="row g-3" action="{{ route('password.request') }}">
                        {{ csrf_field() }}
                        <input name="token" value="{{ $token }}" type="hidden">
                        <div class="form_fld has-feedback">
                            <label>Email</label>
                            <input type="email" value="@if(isset($_REQUEST['email'])) {{$_REQUEST['email']}} @endif" name="email" placeholder="{{ trans('global.login_email') }}" class="fld-control {{ $errors->has('email') ? ' is-invalid' : '' }}" required>

                            @if($errors->has('email'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('email') }}
                                </div>
                            @endif
                        </div>

                        <div class="form_fld" >
                            <label>Password</label>
                            <div class="input-group" id="show_hide_password">
                                <input required type="password" name="password" class="fld-control form-control {{ $errors->has('password') ? ' is-invalid' : '' }} " id="password"><a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @if($errors->has('password'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('password') }}
                                </div>
                            @endif
                        </div>

                        <div class="form_fld" >
                            <label>Confirm Password</label>
                            <div class="input-group" id="show_hide_password">
                                <input required type="password" name="password_confirmation" class="fld-control form-control {{ $errors->has('password') ? ' is-invalid' : '' }} " id="password_confirmation" placeholder="{{ trans('global.login_password_confirmation') }}"><a href="javascript:;" class="input-group-text bg-transparent"><i class='bx bx-hide'></i></a>
                            </div>
                            @if($errors->has('password_confirmation'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('password_confirmation') }}
                                </div>
                            @endif
                        </div>
                        <div class="d-flex flex-justify-between small flex-item-align-center">
                            <a href="{{ route('login') }}" class="cbtn cbtn-text-secondary">Sign In</a>
                            <a href="{{ route('frontend.checkout') }}" class="cbtn cbtn-text-primary">Sign Up</a>
                        </div>
                        <div class="mt-3">
                            <div class="d-flex flex-justify-between small flex-item-align-center">
                                <button class="cbtn cbtn-primary" type="submit">{{ trans('global.reset_password') }} </button>
                                <div>
                                    <a href="{{ route('partner_register') }}" class="cbtn cbtn-text-secondary">Nonprofit Sign Up</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
@endsection
@section('script')

    <script>
        $(document).ready(function () {
            $("#show_hide_password a").on('click', function (event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr('type', 'password');
                    $('#show_hide_password i').addClass("bx-hide");
                    $('#show_hide_password i').removeClass("bx-show");
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr('type', 'text');
                    $('#show_hide_password i').removeClass("bx-hide");
                    $('#show_hide_password i').addClass("bx-show");
                }
            });
        });
    </script>
@endsection