<!DOCTYPE html>

<html lang="en" class="light-style layout-wide  customizer-hide" dir="ltr" data-theme="theme-default"
    data-assets-path="../../assets/" data-template="vertical-menu-template" 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>Login 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 -->
    <link rel="canonical" href="https://1.envato.market/materialize_admin">


    <!-- ? 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="../../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="../../assets/vendor/fonts/remixicon/remixicon.css" />
    <link rel="stylesheet" href="../../assets/vendor/fonts/flag-icons.css" />

    <!-- Menu waves for no-customizer fix -->
    <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="../../assets/css/demo.css" />

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

    <!-- Page CSS -->
    <!-- Page -->
<link rel="stylesheet" href="../../assets/vendor/css/pages/page-auth.css">

    <!-- Helpers -->
    <script src="../../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="../../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="../../assets/js/config.js"></script>

</head>


<body>
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5J3LMKC" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>

  <!-- Layout Content -->

<!-- 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">

      <!-- Login -->
      <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>

          </a>
        </div>
        <!-- /Logo -->

        <div class="card-body mt-1">
          <h4 class="mb-1">歡迎來到卡菲姬 👋</h4>
          <p class="mb-5">請登入後逕行兌換飲品,希望您會喜歡</p>

          <form id="formAuthentication" class="mb-5" action="{{ route(name: 'member.login.post') }}" method="POST">
          @csrf
            <div class="form-floating form-floating-outline mb-5">
              <input type="text" class="form-control" id="email" name="email" placeholder="請填寫您的電子郵件" autofocus>
              <label for="email">電子郵件</label>
            </div>
            <div class="mb-5">
              <div class="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>
              </div>
            </div>
            <div class="mb-5 d-flex justify-content-between mt-5">
              <div class="form-check mt-2">
                <input class="form-check-input" type="checkbox" id="remember-me">
                <label class="form-check-label" for="remember-me">
                  記住 我
                </label>
              </div>
              <a href="{{ route('email.password') }}" class="float-end mb-1 mt-2">
                <span>忘記密碼?</span>
              </a>
            </div>
            <div class="mb-5">
              <button class="btn btn-primary d-grid w-100" type="submit">登  入</button>
            </div>
          </form>

          <p class="text-center">
            <span>新的裝置?</span>
            <a href="{{ route('member.register') }}">
              <span>創建新的帳號</span>
            </a>
          </p>

          <div class="divider my-5">
            <div class="divider-text">或</div>
          </div>

          <div class="d-flex justify-content-center gap-2">

            <a href="{{ route('front.login.line') }}" class="btn btn-icon rounded-circle btn-text-line">
              <i class="tf-icons ri-line-fill"></i>
            </a>


            <a href="{{ route('google.auth') }}"  class="btn btn-icon rounded-circle btn-text-google-plus">
              <i class="tf-icons ri-google-fill"></i>
            </a>
          </div>
        </div>
      </div>
      <!-- /Login -->
    </div>
  </div>
</div>
<!--/ Content -->

  <!--/ Layout Content -->


  {{-- <div class="buy-now">
    <a href="#" target="" class="btn btn-danger btn-buy-now">Buy Now</a>
  </div> --}}


  <!-- Include Scripts -->
  <!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
<!-- BEGIN: Vendor JS-->
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/jquery/jquery.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/popper/popper.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/js/bootstrap.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/node-waves/node-waves.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/hammer/hammer.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/typeahead-js/typeahead.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/js/menu.js" />
<script type="module" src="{{ asset('assets') }}/vendor/libs/jquery/jquery.js"></script>
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/@form-validation/popular.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{ asset('assets') }}/vendor/libs/@form-validation/bootstrap5.js" />
{{-- <link rel="modulepreload" href="{{asset('assets')}}/index.js" /> --}}
{{-- <link rel="modulepreload" href="{{asset('assets')}}/auto.js" /> --}}
<script type="module" src="{{ asset('assets') }}/vendor/libs/@form-validation/popular.js">
</script><script type="module" src="{{ asset('assets') }}/vendor/libs/@form-validation/bootstrap5.js"></script>
<script type="module" src="{{ asset('assets') }}/vendor/libs/@form-validation/auto-focus.js"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<link rel="modulepreload" href="{{ asset('assets') }}/js/main.js" />
<script type="module" src="{{ asset('assets') }}/js/main.js"></script>
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
<link rel="modulepreload" href="{{ asset('assets') }}/js/pages-auth.js" />
<script type="module" src="{{ asset('assets') }}/js/pages-auth.js"></script>
<!-- END: Page JS-->
  <script src="{{ asset('assets') }}/js/form-validation.js"></script>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

 @if (session('success'))
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                title: '成功'
                , text: "{{ session('success') }}"
                , icon: 'success'
                , confirmButtonText: '确定'
            });
        });

    </script>
    @endif
    @if (session('error'))
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Swal.fire({
                title: '失敗'
                , text: "{{ session('error') }}"
                , icon: 'error'
                , confirmButtonText: '确定'
            });
        });

    </script> @endif

</html>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
