@extends('.frontend.default')

@section('content')
    <div class="container p-5">
        <div class="row justify-content-center">
            <div class="col-8 p-0">
                <p class="title-base mb-3">更改密碼</p>
            </div>

            <div class="col-8 border-secondary border-radius-15" style="padding: 30px">
                <form method="POST" action="{{ route('password.update') }}">
                    @csrf

                    <input type="hidden" name="token" value="{{ $token }}">

                    <div class="form-row no-height" style="padding-top: 0px">
                        <div class="col-12 max-auto mb-3">
                            <input type="email" name="email"
                                   class="form-control border-secondary border-radius-15  @error('email') is-invalid @enderror"
                                   value="{{ $email ?? old('email') }}" readonly/>
                            @error('email')
                            <span class="invalid-feedback text-right" style="max-width:590px" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="col-12 max-auto mb-3">
                            <input type="password" class="form-control border-secondary border-radius-15 @error('password') is-invalid @enderror"
                                   name="password" id="password" placeholder="新密碼"/>
                            <span class="d-block text-right mx-auto" style="max-width: 590px;">
                                                    {{ __('passwords.hint')  }}
                                                </span>
                            @error('password')
                            <span class="invalid-feedback text-right" style="max-width:590px" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>

                        <div class="col-12 max-auto mb-3">
                            <input type="password" class="form-control border-secondary border-radius-15" name="password_confirmation"
                                   id="password_confirmation" placeholder="確認新密碼"/>
                        </div>
                        <div class="col-12 text-center mb-0">
                            <button class="reset_password btn btn-primary border-radius-15 text-center w-100 py-2" style="max-width: 590px">更改密碼
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
      .footer_sec {
        position: fixed;
        bottom: 0px;
        width: 100%;
      }
    </style>
@endsection