<!DOCTYPE html>

<html lang="en" class="light-style   layout-menu-fixed     customizer-hide" dir="ltr" data-theme="theme-default"   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>卡菲姬APP</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">
    <!-- laravel CRUD token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Canonical SEO -->
    <link rel="canonical" href="https://1.envato.market/materialize_admin">
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ asset('assets/img/favicon/cafeg.ico') }}" />


    <!-- Include Styles -->
    <!-- $isFront is used to append the front layout styles only on the front layout otherwise the variable will be blank -->
    <!-- BEGIN: Theme CSS-->
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com/css">
    <link rel="preconnect" href="https://fonts.gstatic.com" cross origin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">

    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/fonts/remixicon/remixicon.css" />
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/fonts/flag-icons.css" />
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/fonts/remixicon/remixicon.css" class="" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/fonts/flag-icons.css" class="" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/node-waves/node-waves.css" class="" />
    <!-- Core CSS -->
    {{-- <link rel="preload" as="style" href="{{asset('assets')}}/vendor/css/core-dark.css" />
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/css/theme-default-dark.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="preload" as="style" href="{{asset('assets')}}/css/demo.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/css/core-dark.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{asset('assets')}}/css/demo.css" class="" />

    <!-- Vendor Styles -->
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" class="" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.css" class="" />
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/libs/@form-validation/form-validation.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/libs/@form-validation/form-validation.css" class="" />
    <!-- Page Styles -->
    <link rel="preload" as="style" href="{{asset('assets')}}/vendor/css/pages/page-auth.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/css/pages/page-auth.css" class="" />
    <!-- Include Scripts for customizer, helper, analytics, config -->
    <!-- $isFront is used to append the front layout scriptsIncludes only on the front layout otherwise the variable will be blank -->
    <!-- laravel style -->
    <link rel="modulepreload" href="{{asset('assets')}}/vendor/js/helpers.js" />
    <script type="module" src="{{asset('assets')}}/vendor/js/helpers.js"></script>
    <!-- beautify ignore:start -->
  <!--! 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.  -->
  <link rel="modulepreload" href="{{asset('assets')}}/vendor/js/template-customizer.js" />
  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <link rel="modulepreload" href="{{asset('assets')}}/js/config.js" /><script type="module" src="{{asset('assets')}}/js/config.js"></script>
<script type="module">
  window.templateCustomizer = new TemplateCustomizer({
    cssPath: '',
    themesPath: '',
    defaultStyle: "light",
    defaultShowDropdownOnHover: "1", // true/false (for horizontal layout only)
    displayCustomizer: "1",
    lang: 'en',
    pathResolver: function(path) {
      var resolvedPaths = {
        // Core stylesheets
                  'core.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/core-kL5gEEKA.css',
          'core-dark.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/core-dark-DFvmi5J3.css',

        // Themes
                  'theme-default.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-default-Bt2z4DrM.css',
          'theme-default-dark.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-default-dark-CHvAJUy2.css',
                  'theme-bordered.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-bordered-DhjhTV9k.css',
          'theme-bordered-dark.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-bordered-dark-C25VfhpZ.css',
                  'theme-semi-dark.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-semi-dark-D80v88qZ.css',
          'theme-semi-dark-dark.scss': 'https://demos.pixinvent.com/materialize-html-laravel-admin-template/demo/build/assets/theme-semi-dark-dark-BZrM7P_B.css',
              }
      return resolvedPaths[path] || path;
    },
    'controls': ["rtl","style","headerType","contentLayout","layoutCollapsed","layoutNavbarOptions","themes"],
  });
</script>
  <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>
</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>
            <span class="app-brand-text demo text-heading fw-semibold">
              &nbsp;    &nbsp;          <img src="{{asset('assets/img/logo/cafeg-logo-1.png')}}"  width="45%" height="45%" alt="{{asset('img/logo/cafeg-logo.png')}}"> </img>

            </span>
          </a>
        </div>
        <!-- /Logo -->
          @php
          if(empty($data)){
            $data = Auth::guard('member')->user();
            unset($data['password']);
          }
          @endphp
        <div class="card-body mt-1">
          <h4 class="mb-1">卡菲姬個人資料</h4>
          <p class="mb-5">Hi, <span class="text-ifno"> {{$data->name }} 用戶 </span> 歡迎你 ! ,請花幾分鐘完善資料</p>

<div class="card" id="editUser">
  <div class="content">
    <div class="body p-0">
      <div class="text-center mb-6">
        <h4 class="mb-2">編輯您的資訊</h4>
        <p class="mb-6">更新用戶詳細資訊</p>
      </div>
      <form id="editUserForm" class="row g-5"  >
        <!-- 暱稱 -->
        <div class="col-12">
          <div class="form-floating form-floating-outline">
            <input
              readonly
              type="text"
              id="modalEditUserFirstName"
              name="modalEditUserFirstName"
              class="form-control"
              value="{{$data->name}}"
              placeholder="暱稱"
              aria-label="暱稱"
            />
            <label for="modalEditUserFirstName">暱稱</label>
          </div>
        </div>

        <!-- Email -->
        <div class="col-12">
          <div class="form-floating form-floating-outline">
            <input
              type="email"
              id="formValidationEmail"
              class="form-control"
              placeholder="john.doe@example.com"
              aria-label="Email"
              required
                  value="{{$data->email ?? ''}}"

            />
            <label for="formValidationEmail">Email</label>
            <div class="invalid-feedback">請輸入有效的 Email</div>
          </div>
        </div>

        <!-- 密碼 -->
        <div class="col-12">
          <div class="form-password-toggle">
            <div class="input-group input-group-merge">
              <div class="form-floating form-floating-outline">
                <input
                  type="password"
                  id="basic-default-password"
                  class="form-control"
                  placeholder="密碼"
                  aria-label="密碼"
                  value="{{$data->password ?? ''}}"

                />
                <label for="basic-default-password">密碼</label>
            <div class="invalid-feedback">請輸入有效密碼</div>

              </div>
              <span
                class="input-group-text cursor-pointer"
                id="basic-default-password3"
              >
                <i class="ri-eye-off-line"></i>
              </span>
            </div>
          </div>

        </div>

        <!-- 確認密碼 -->
        <div class="col-12">
          <div class="form-password-toggle">
            <div class="input-group input-group-merge">
              <div class="form-floating form-floating-outline">
                <input
                  type="password"
                  id="formValidationConfirmPass"
                  name="formValidationConfirmPass"
                  class="form-control"
                  placeholder="確認密碼"
                  aria-label="確認密碼"
                  value="{{$data->password ?? ''}}"

                />
                <label for="formValidationConfirmPass">確認密碼</label>
              <div class="invalid-feedback">密碼與確認密碼不相符</div>

              </div>
              <span
                class="input-group-text cursor-pointer"
                id="multicol-confirm-password2"
              >
                <i class="ri-eye-off-line"></i>
              </span>
            </div>
          </div>
        </div>

        <!-- 電話 -->
        <div class="col-12">
          <div class="input-group input-group-merge">

            <div class="form-floating form-floating-outline">
              <input
                type="text"
                id="modalEditUserPhone"
                name="modalEditUserPhone"
                class="form-control phone-number-mask"
                value="{{$data->phone ?? ''}}"
                placeholder="0920111222"
                aria-label="電話"
              />
              <label for="modalEditUserPhone">電話</label>
              <div class="invalid-feedback">請輸入有效電話</div>

            </div>
          </div>

        </div>

        <!-- 按鈕 -->
        <div
          class="col-12 text-center d-flex flex-wrap justify-content-center gap-4 row-gap-4"

        >
          <button type="submit" class="btn btn-primary">送出</button>
          <button
            id = 'cancel'
            type="reset"
            class="btn btn-outline-secondary"
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            取消
          </button>
        </div>
      </form>
    </div>
  </div>
</div>



          </div>
        </div>
      </div>
    </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>
<script>
$(document).ready(function () {
    let valid  =true;
$("#formValidationEmail").on('blur', function () {
        var email = $(this).val(); // 獲取電子郵件輸入框的值

        // 簡單的電子郵件格式驗證（可選）
        if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
            Swal.fire({
                icon: 'error',
                title: '格式錯誤',
                text: '請輸入有效的電子郵件地址！'
            });
            return;
        }

        // 發送 AJAX 請求到伺服器進行進一步驗證
        $.ajax({
            url: "{{route('member.validemail')}}", // 替換成你的 API 路徑
            type: 'get', // 或 'GET'，根據你的需求
            data: {
                email: email
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // 如果使用 Laravel CSRF 保護
            },
            success: function (response) {
                // 如果電子郵件已被註冊

                console.log('email check:', response.status);

                if (response.status =='error') {
                    valid =false;
                    Swal.fire({
                        icon: 'warning',
                        title: '電子郵件已被註冊',
                        text: '該電子郵件已存在，請選擇下一步操作。',
                        showCancelButton: true,
                        confirmButtonText: '驗證電子郵件',
                        cancelButtonText: '我知道了，換一個',
                        reverseButtons: true // 按鈕排列反向
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // 使用者選擇驗證電子郵件
                            Swal.fire({
                                icon: 'info',
                                title: '驗證發送中',
                                text: '已向該電子郵件發送驗證信，請檢查郵箱。'
                            });
                            // 可在此處調用發送驗證郵件的函式
                            sendVerificationEmail(email);
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            // 使用者選擇換一個電子郵件
                            $('#formValidationEmail').val(''); // 清空輸入框
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'success',
                        title: '電子郵件可用',
                        text: '您可以繼續使用此電子郵件。'
                    });
                }
            },
            error: function (xhr) {
                // 錯誤處理
                Swal.fire({
                    icon: 'error',
                    title: '伺服器錯誤',
                    text: '驗證失敗，請稍後再試！'
                });
            }
        });
    });
    // 發送驗證郵件的函式
    function sendVerificationEmail(email) {
        console.log('email:',email);
        $.ajax({
            url: "{{route('member.sendemail')}}", // 替換為發送驗證郵件的 API
            type: 'POST',
            data: {
                email: email
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function ( Response) {
                console.log('Response:',Response);

            if(Response.status =='success'){
                Swal.fire({
                    icon: 'success',
                    title: '驗證信已發送',
                    text: '請檢查您的電子郵件以完成驗證。'
                });
            }

            },
            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: '驗證信發送失敗',
                    text: '請稍後再試！'
                });
            }
        });
    }


    $('#editUserForm').on('submit', function (e) {
        e.preventDefault(); // 防止表單提交

        // let valid = true;

        // Email 驗證
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const emailInput = $('#formValidationEmail');
        if (!emailRegex.test(emailInput.val())) {
            valid = false;
            emailInput.addClass('is-invalid');
        } else {
            emailInput.removeClass('is-invalid');
        }

        // 密碼長度驗證
        const passwordInput = $('#basic-default-password');
        //if (passwordInput.val().length < 6) {
          //  valid = false;
            //passwordInput.addClass('is-invalid');
        //} else {
          //  passwordInput.removeClass('is-invalid');
        //}

        // 確認密碼驗證
        const confirmPasswordInput = $('#formValidationConfirmPass');
        if (passwordInput.val() !== confirmPasswordInput.val()) {
            valid = false;
            confirmPasswordInput.addClass('is-invalid');
        } else {
            confirmPasswordInput.removeClass('is-invalid');
        }

        // 手機號碼驗證
        const phoneRegex = /^09\d{8}$/;
        const phoneInput = $('#modalEditUserPhone');
        if (!phoneRegex.test(phoneInput.val())) {
            valid = false;
            phoneInput.addClass('is-invalid');
        } else {
            phoneInput.removeClass('is-invalid');
        }

        // 若通過所有驗證，發送 AJAX 請求
        if (valid) {
            const formData = {
                email: emailInput.val(),
                password: passwordInput.val(),
                phone: phoneInput.val(),
            };

            $.ajax({
                url: "{{ route('member.profile.update') }}",
                type: 'put',
                data: formData,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function (response) {
                 Swal.fire({
                     title: '成功'
                     , text: "{{ session('success') }}"
                     , icon: 'success'
                     , confirmButtonText: '确定'
                 }).then((result) => {
            if (result.isConfirmed) {
                // 跳轉到 member.index 路由
                window.location.href = "{{ route('member.index') }}";
            }
        });


                },
                error: function (error) {
                              Swal.fire({
                title: '失敗'
                , text: "更新失敗"
                , icon: 'error'
                , confirmButtonText: '确定'
            });
                },
            });
        }
    });
});

$("#cancel").on('click',function(){
    let valid = true;

// Email 驗證
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const emailInput = $('#formValidationEmail');
    if (!emailRegex.test(emailInput.val())) {
        valid = false;
        emailInput.addClass('is-invalid');
    } else {
        emailInput.removeClass('is-invalid');
    }
    if(valid == true){
          window.location.href = "{{ route('member.index') }}";
    }

});


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

</html>
