<!DOCTYPE html>
<html lang="en" class="light-style layout-wide  customizer-hide" dir="ltr" data-theme="theme-bordered" data-assets-path="{{asset('assets')}}/" data-template="vertical-menu-template-bordered" data-style="light">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>Reset Password Basic - Pages | Materialize - Material Design HTML Admin Template</title>


    <meta name="description" content="Materialize – is the most developer friendly &amp; highly customizable Admin Dashboard Template." />
    <meta name="keywords" content="dashboard, material, material design, bootstrap 5 dashboard, bootstrap 5 design, bootstrap 5">
    <!-- Canonical SEO -->


    <!-- ? PROD Only: Google Tag Manager (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-5J3LMKC');</script>
    <!-- End Google Tag Manager -->

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{asset('assets')}}/img/favicon/favicon.ico" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/fonts/remixicon/remixicon.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/fonts/flag-icons.css" />

    <!-- Menu waves for no-customizer fix -->
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/node-waves/node-waves.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/css/rtl/theme-bordered.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="{{asset('assets')}}/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.css" />
    <!-- Vendor -->
<link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/@form-validation/form-validation.css" />

    <!-- Page CSS -->
    <!-- Page -->
<link rel="stylesheet" href="{{asset('assets')}}/vendor/css/pages/page-auth.css">

    <!-- Helpers -->
    <script src="{{asset('assets')}}/vendor/js/helpers.js"></script>
    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    <script src="{{asset('assets')}}/vendor/js/template-customizer.js"></script>
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="{{asset('assets')}}/js/config.js"></script>

</head>

<body>


  <!-- ?PROD Only: Google Tag Manager (noscript) (Default ThemeSelection: GTM-5DDHKGP, PixInvent: GTM-5J3LMKC) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5J3LMKC" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Content -->

<div class="position-relative">
  <div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
    <div class="authentication-inner py-6">

      <div class="card p-md-7 p-1">
            <!-- Logo -->
      <div class="app-brand justify-content-center mt-5">
        <a href="#" class="app-brand-link gap-2">
            <span class="app-brand-logo demo">
                <span class="app-brand-text demo text-heading fw-semibold">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img style="margin-left: 5%" src="{{ asset('assets/img/logo/cafeg-logo-1.png') }}"  width="45%" height="45%" alt="{{ asset('img/logo/cafeg-logo.png') }}"> </img>
                </span>
            </span>
            <span class="app-brand-text demo text-heading fw-semibold">
                &nbsp; &nbsp; <img src="{{ asset('assets/img/logo/cafeg-logo-h.png') }}" width="120px" height="50px" alt="{{ asset('img/logo/cafeg-logo.png') }}"> </img>

            </span>
        </a>
    </div>
        <!-- /Logo -->
        <!-- Reset Password -->
        <div class="card-body">
          <h4 class="mb-1"> 重新設定密碼 🔒</h4>
          <p class="mb-5">請設定新密碼</p>
          <form id="formAuthentication" class="mb-5" action="{{ route('change.password.put') }}"  method="POST">
            @csrf
            @method('PUT')
            <div class="mb-5 form-password-toggle">
              <div class="input-group input-group-merge">
                <div class="form-floating form-floating-outline">
                  <input type="password" id="password" class="form-control" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
                  <label for="password">新密碼</label>
                </div>
                <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
              </div>
              <input type="hidden" name="id" value="{{ $id }}">
            </div>
            <div class="mb-5 form-password-toggle">
              <div class="input-group input-group-merge">
                <div class="form-floating form-floating-outline">
                  <input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
                  <label for="confirm-password">確認密碼</label>
                </div>
                <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
              </div>
            </div>
            <button class="btn btn-primary d-grid w-100 mb-5">
              Set new password
            </button>
            <div class="text-center">
              <a href="auth-login-basic.html" class="d-flex align-items-center justify-content-center">
                <i class="ri-arrow-left-s-line scaleX-n1-rtl ri-20px me-1_5"></i>
                Back to login
              </a>
            </div>
          </form>
        </div>
      </div>
      <!-- /Reset Password -->
      <img alt="mask" src="{{asset('assets')}}/img/illustrations/auth-basic-reset-password-mask-light.png" class="authentication-image d-none d-lg-block" data-app-light-img="illustrations/auth-basic-reset-password-mask-light.png" data-app-dark-img="illustrations/auth-basic-reset-password-mask-dark.png" />
    </div>
  </div>
</div>

<!-- / Content -->





  <!-- Core JS -->
  <!-- build:js assets/vendor/js/core.js -->
  <script src="{{asset('assets')}}/vendor/libs/jquery/jquery.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/popper/popper.js"></script>
  <script src="{{asset('assets')}}/vendor/js/bootstrap.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/node-waves/node-waves.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/hammer/hammer.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/i18n/i18n.js"></script>
  <script src="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.js"></script>
  <script src="{{asset('assets')}}/vendor/js/menu.js"></script>

  <!-- endbuild -->

  <!-- Vendors JS -->
  <script src="{{asset('assets')}}/vendor/libs/@form-validation/popular.js"></script>
<script src="{{asset('assets')}}/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="{{asset('assets')}}/vendor/libs/@form-validation/auto-focus.js"></script>

  <!-- Main JS -->
  <script src="{{asset('assets')}}/js/main.js"></script>


  <!-- Page JS -->
  <script src="{{asset('assets')}}/js/pages-auth.js"></script>

</body>

</html>

<!-- beautify ignore:end -->

