@extends('customer.layout.main')
@section('content')
<section class="vh-100">
    <div class="container-fluid h-custom">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-md-9 col-lg-6 col-xl-5 img-hidden">
          <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
            class="img-fluid" alt="Sample image">
        </div>
        <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
            <div>
                @include('admin.layout_admin.alert')
                @include('admin.layout_admin.hide')
            </div>
          <form action="{{ route('update-new-password') }}" method="POST">
            @csrf
            <div data-mdb-input-init class="form-outline mb-4">
              <label class="form-label" for="token">Mã xác nhận</label>
              <input type="text" name="token_reset_password" id="token" class="form-control form-control-lg"
                placeholder="Nhập mã xác nhận" value="{{ old('token_reset_password') }}"/>
            </div>

            <div data-mdb-input-init class="form-outline mb-4">
                <label class="form-label" for="email">Email</label>
                <input type="email" name="email" id="email" class="form-control form-control-lg"
                  placeholder="Nhập email" value="{{ old('email') }}"/>
              </div>

            <!-- Password input -->
            <div data-mdb-input-init class="form-outline mb-3">
              <label class="form-label" for="newPassword">Mật khẩu mới</label>
              <input type="password" name="password" id="newPassword" class="form-control form-control-lg"
                placeholder="Nhập mật khẩu" value="{{ old('password') }}"/>
            </div>
            <div data-mdb-input-init class="form-outline mb-3">
                <label class="form-label" for="confirmNewPass">Xác nhận mật khẩu</label>
                <input type="password" name="password_confirmation" id="confirmNewPass" class="form-control form-control-lg"
                  placeholder="Xác nhận mật khẩu mới" />
              </div>

            <div class="text-center text-lg-start mt-4 pt-2 flex flex-col">
                <small class="font-italic text-danger">Vui lòng nhập đúng email đã gửi mã xác nhận!</small>
                <a href="{{ route('forgotpassword') }}" class="text-body mb-2">Yêu cầu mã xác nhận mới</a>
              <button  type="submit" class="btn btn-primary btn-lg"
                style="padding-left: 2.5rem; padding-right: 2.5rem;">
                Đổi mật khẩu
                </button>
            </div>
          </form>
          </form>
        </div>
      </div>
    </div>
  </section>
@endsection